首页 文章

HTML Canvas - JavaScript动态轮换问题

提问于
浏览 次
0

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

基本的想法是，在注册“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/

更新：单击鼠标右键向右旋转，鼠标滚轮向左旋转 .

javascript html5 canvas

1 回答

  • 2

    您没有重置画布状态，因此 clearRect 仍然在旋转下运行，导致它实际上没有清除画布 .

    作为一般规则，如果您正在使用转换（ translate ， rotate ，...），那么您应该始终将 ctx.save() 放在之前，并且 ctx.restore() 之后 . 这会保存并恢复画布' state with regard to transformations and styles. This is great for bigger projects, where you want to be sure that code in one place doesn't干扰其他地方的代码，并且基本上是相当于"not polluting the global scope"的画布 .

    回复于

相关问题