使用Canvas时出现错误行为？

Question

3

我正在使用html画布(canvas)制作一款游戏。

这是我的进度：

http://db.tt/ei3LlR（使用WASD和左/右箭头键）需要缩放。

我的问题是：

坦克图像和炮塔图像都是普通的PNG图像。阴影使用这些图像动态创建，不是图像对象而是画布元素(canvas elements)。

只有当我改变图像的旋转角度时，才会出现闪烁。所谓闪烁，是指图像似乎非常快地收缩和扩大。当图像停止旋转时，闪烁也停止了。

这是怎么回事？这是否完全是我的问题？

- Tiby312

我在Chrome和Firefox中都没有看到任何“闪烁”的情况。我唯一看到的是小炮塔动画。但还是做得不错，对我来说看起来相当流畅。 - Cristian Sanchez

我看到坦克的炮塔闪烁着，看起来像旋转的加特林机枪，每个坦克上都有一个白色的矩形在来回移动。这是你所说的吗？看起来几乎是故意的... - MooGoo

我禁用了炮塔动画，以便更容易观察。你们在chrome中转动坦克时阴影是否会闪烁？ - Tiby312

是的，我现在明白了。不幸的是，我不知道是什么原因导致这个问题。祝你好运。 - Cristian Sanchez

在 FireFox 3.6.17 中尝试过，对我来说运行良好。看了你的代码，有很多东西可以学习。谢谢分享。 - CyberFonic

显示剩余3条评论

2个回答

0

更新。问题已经不存在了！他们一定已经修复了它！

- Tiby312

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andrewmu · Accepted Answer

关于闪烁问题，您似乎没有对画布进行双缓冲处理。因此，可能是由于地面或阴影在坦克和炮塔之前绘制，并且在绘制坦克和炮塔之前发生了屏幕刷新，导致闪烁问题。

这个问题涉及到Canvas 2D的双缓冲处理： HTML5/Canvas是否支持双缓冲处理？我还想知道上下文中的“rotate”和“translate”方法中的小舍入误差是否会导致炮塔图像抖动。不同的浏览器实现可能具有不同的精度级别。您可以尝试将参数四舍五入到最近的整数以检查这一点。

PS：您的游戏目前看起来非常棒 - 坦克图形和操作都非常好。