js canvas 怎么做水平翻转和垂直翻转

在 JavaScript 的 Canvas 中，可以使用 scale 方法来实现水平翻转和垂直翻转。下面是示例代码：

// 创建 Canvas 元素和上下文
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 绘制原始图形
ctx.fillRect(50, 50, 100, 100);

// 水平翻转
ctx.scale(-1, 1);
ctx.translate(-canvas.width, 0);
ctx.fillRect(50, 50, 100, 100);

// 垂直翻转
ctx.scale(1, -1);
ctx.translate(0, -canvas.height);
ctx.fillRect(50, 50, 100, 100);

在上述代码中，首先绘制了一个矩形。然后，通过调用 scale 方法，将绘图上下文水平翻转。scale(-1, 1) 表示将 x 轴坐标进行反转，即水平翻转。接着，通过 translate 方法将绘图上下文的坐标原点移动到 Canvas 的右边，实现了水平翻转的效果。

类似地，可以通过 scale(1, -1) 实现垂直翻转。scale(1, -1) 表示将 y 轴坐标进行反转，即垂直翻转。然后，通过 translate 方法将绘图上下文的坐标原点移动到 Canvas 的底部，实现了垂直翻转的效果