可以通过 Canvas API 来实现固定四点绘制梯形。具体可以按照如下步骤：
- 创建一个 Canvas 元素。
<canvas id="myCanvas"></canvas>
- 获取 Canvas 上下文。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
- 定义四个坐标点。
const x1 = 50;
const y1 = 50;
const x2 = 100;
const y2 = 100;
const x3 = 150;
const y3 = 100;
const x4 = 200;
const y4 = 50;
- 绘制路径。
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.lineTo(x4, y4);
ctx.closePath();
- 填充颜色。
ctx.fillStyle = '#f00';
ctx.fill();
完整代码如下：
<canvas id="myCanvas"></canvas><script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');const x1 = 50;const y1 = 50;const x2 = 100;const y2 = 100;const x3 = 150;const y3 = 100;const x4 = 200;const y4 = 50;ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.lineTo(x3, y3);ctx.lineTo(x4, y4);ctx.closePath();ctx.fillStyle = '#f00';ctx.fill();
</script>
)
