js 固定四点绘制梯形

最新推荐文章于 2024-01-05 00:00:00 发布

超级大超越

最新推荐文章于 2024-01-05 00:00:00 发布

阅读量284

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/u012632105/article/details/132617905

版权

可以通过 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>