JS Canvas 多边形水平镜像翻转实现教程

要实现 canvas 多边形的水平镜像翻转，可以按照以下步骤进行操作：

创建一个 canvas 元素并获取它的上下文：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

定义多边形的顶点坐标数组：

const vertices = [
  { x: 50, y: 50 },
  { x: 100, y: 50 },
  { x: 100, y: 100 },
  { x: 50, y: 100 }
];

绘制初始多边形：

ctx.beginPath();
ctx.moveTo(vertices[0].x, vertices[0].y);
for (let i = 1; i < vertices.length; i++) {
  ctx.lineTo(vertices[i].x, vertices[i].y);
}
ctx.closePath();
ctx.stroke();

水平翻转多边形：

ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
ctx.beginPath();
ctx.moveTo(vertices[0].x, vertices[0].y);
for (let i = 1; i < vertices.length; i++) {
  ctx.lineTo(vertices[i].x, vertices[i].y);
}
ctx.closePath();
ctx.stroke();

在上述代码中，我们首先创建了一个 canvas 元素，并获取了它的上下文。然后，定义了多边形的顶点坐标数组。接下来，通过调用 ctx.beginPath() 开始路径绘制，并使用 ctx.moveTo() 和 ctx.lineTo() 方法绘制多边形的线段。绘制完成后，调用 ctx.closePath() 闭合路径，并通过 ctx.stroke() 方法描边多边形。

最后，我们通过调用 ctx.translate() 方法将坐标系平移到 canvas 的右边，然后调用 ctx.scale() 方法进行水平翻转。接着，再次绘制多边形，这时多边形将会进行水平镜像翻转。

完整的示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas 多边形水平镜像翻转</title>
  </head>
  <body>
    <script>
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = 200;
      canvas.height = 200;
      document.body.appendChild(canvas);

      const vertices = [
        { x: 50, y: 50 },
        { x: 100, y: 50 },
        { x: 100, y: 100 },
        { x: 50, y: 100 }
      ];

      ctx.beginPath();
      ctx.moveTo(vertices[0].x, vertices[0].y);
      for (let i = 1; i < vertices.length; i++) {
        ctx.lineTo(vertices[i].x, vertices[i].y);
      }
      ctx.closePath();
      ctx.stroke();

      ctx.translate(canvas.width, 0);
      ctx.scale(-1, 1);
      ctx.beginPath();
      ctx.moveTo(vertices[0].x, vertices[0].y);
      for (let i = 1; i < vertices.length; i++) {
        ctx.lineTo(vertices[i].x, vertices[i].y);
      }
      ctx.closePath();
      ctx.stroke();
    </script>
  </body>
</html>

运行以上代码，你将会看到一个多边形被水平镜像翻转的效果。