javascript - 使用 Canvas 的 Buggy 行为？

Question

我正在使用 html Canvas 制作游戏。

这是我的进步:

http://db.tt/ei3LlR (使用 WASD 和左/右箭头键)有助于缩放。

我的问题是:

• 为什么google中阴影会闪烁水箱转动时 Chrome ？
• 为什么炮塔图像闪烁炮塔转动时的 Safari ？
• 为什么它在 Firefox 中运行良好？

坦克图像和炮塔图像是普通的旧 png。阴影是使用这些图像动态创建的。阴影不是图像对象而是 Canvas 元素。

闪烁似乎只在我改变图像的旋转时发生。当我说闪烁时，我的意思是图像看起来收缩和增长得非常快。当图像停止旋转时，闪烁再次停止。

这是怎么回事？这是我的问题吗？

Answer 1

关于闪烁问题，您似乎没有对 Canvas 进行双重缓冲。所以有可能出现闪烁，因为地面或阴影是在坦克之前绘制的，并且屏幕刷新发生在您绘制坦克和炮塔之前。

这个问题与 Canvas 2D 的双缓冲有关: Does HTML5/Canvas Support Double Buffering?

我还想知道上下文的 rotate 和 translate 方法中的小舍入错误是否会导致 turrent 图像抖动。对于这些操作，不同的浏览器实现可能具有不同的准确度级别。您可以尝试将参数四舍五入为最接近的整数来检查这一点。

PS:到目前为止，您的游戏看起来很棒 - 坦克图形和操控性非常好。