Canvas 三角形镜像翻转：完整步骤和代码示例

要将一个三角形进行镜像翻转，可以按照以下步骤进行：

1. 在 canvas 上绘制原始的三角形。

context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x3, y3);
context.closePath();
context.stroke();

2. 创建一个新的路径，通过变换矩阵进行镜像翻转。

context.save();
context.transform(-1, 0, 0, 1, 0, 0); // 将 x 轴上的坐标取反

3. 绘制镜像翻转后的三角形。

context.beginPath();
context.moveTo(-x1, y1);
context.lineTo(-x2, y2);
context.lineTo(-x3, y3);
context.closePath();
context.stroke();

4. 恢复之前的变换矩阵。

context.restore();

完整的代码示例：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

// 原始三角形的坐标
var x1 = 50, y1 = 50;
var x2 = 100, y2 = 100;
var x3 = 150, y3 = 50;

// 绘制原始三角形
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x3, y3);
context.closePath();
context.stroke();

// 镜像翻转
context.save();
context.transform(-1, 0, 0, 1, 0, 0);

// 绘制镜像翻转后的三角形
context.beginPath();
context.moveTo(-x1, y1);
context.lineTo(-x2, y2);
context.lineTo(-x3, y3);
context.closePath();
context.stroke();

// 恢复之前的变换矩阵
context.restore();

这样就可以在 canvas 上将一个三角形进行镜像翻转。