HTML画布水平翻转仅在每秒单击时有效

我有一个画布元素，上面有一张照片。单击链接时，将执行以下操作：

var ctx = canvas.getContext("2d");
ctx.scale(-1,1);
ctx.drawImage(canvas, canvas.width * -1, 0, canvas.width, canvas.height);

第一次单击、第三次单击、第五次单击等时，效果与预期一样（图像水平翻转）。第二次单击、第四次单击、第六次单击等时，什么都没有发生

---

关于如何让每次点击都能使用此功能，您有什么想法吗？

此功能适用于每次点击：

问问自己，它和你的有什么不同

---

它可能与图像加载有关。试试你的没有图片的。它还存在同样的问题吗？

是的，问题是因为在绘制图像后，您没有将画布比例恢复为1,1，所以基本上第一次调用事件时，您的画布比例将在下次变为1,1时变为-1,1，但您需要始终为-1,1。这是因为您直接从画布而不是从图像元素绘制图像，因此每次都需要翻转它

---

尝试在缩放之前使用

ctx.save（）

，在绘制图像之后使用

ctx.restore（）

。或者在绘制图像后再次调用

ctx.scale（-1,1）

。或者，如果您的画布仅用于此目的，您可以在事件外部进行缩放（但在第一次将图像绘制到画布之后）。

将整个脚本放在其中可能是一个好主意。可能是事件处理程序。添加保存/还原解决了此问题。我不知道为什么，但谢谢你给我指出了正确的方向。