javascript - HTML Canvas - JavaScript 动态旋转问题

Question

我正在尝试使用 HTML Canvas 和 JavaScript 制作一个简单的游戏，但遇到了一个独特的问题。我的代码不完整，也许我遗漏了一些明显的东西，但本质上我试图将波动旋转变换应用于跟随鼠标位置的光剑图像。问题是，在应用旋转的同时沿对 Angular 线移动 Canvas 似乎会留下旧框架的碎片。

基本思想是，这将在注册“mousemove”事件时连续调用:

ctx.clearRect(0, 0, w, h);
ctx.translate(ax, ay);
ctx.rotate(Math.PI/180);
// Draw image back
ctx.translate(-ax, -ay);
ctx.drawImage(saberimg, x-90, y-438);

举例说明:https://jsfiddle.net/2ynfq5k0/

更新:点击鼠标右键向右旋转，鼠标滚轮向左旋转。

Answer 1

您没有重置 Canvas 状态，因此您的 clearRect 仍在旋转下运行，导致它实际上并未清除 Canvas 。

作为一般规则，如果您正在使用转换(平移、旋转...)，那么您应该始终之前是 ctx.save()，之后是 ctx.restore()。这将保存并恢复 Canvas 的变换和样式状态。这对于较大的项目来说非常有用，在这些项目中，您希望确保一个地方的代码不会干扰其他地方的代码，并且 Canvas 基本上相当于“不污染全局范围”。