canvas 做画笔镜像翻转
要在Canvas上实现画笔镜像翻转,可以使用以下步骤:
- 首先,在Canvas中绘制画布。
- 在绘制之前,使用
ctx.save()保存画布的当前状态。 - 使用
ctx.scale(-1, 1)将画布水平翻转。 - 绘制需要翻转的内容。
- 使用
ctx.restore()恢复画布的状态。
以下是一个示例代码:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制画布
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 保存画布状态
ctx.save();
// 水平翻转画布
ctx.scale(-1, 1);
// 绘制需要翻转的内容
ctx.fillStyle = "blue";
ctx.fillRect(-100, 100, 200, 200);
// 恢复画布状态
ctx.restore();
在上面的示例中,我们使用ctx.scale(-1, 1)将画布水平翻转,然后在翻转后的画布上绘制一个蓝色的矩形。
原文地址: https://www.cveoy.top/t/topic/i8mh 著作权归作者所有。请勿转载和采集!