【问题标题】:HTML5 Canvas Ghosting Animation Issue?HTML5 Canvas 重影动画问题?
【发布时间】:2012-10-26 16:52:55
【问题描述】:

我一直在看很多关于如何使用 javascript 和请求动画帧做正确的 HTML5 动画的教程,即使在演示中,动画看起来也很模糊,就像被重绘的图像留下了自己的幻影图像一样布雷夫第二。但后来我看到像微软移植版的割绳子这样的游戏似乎已经解决了这个问题。有谁知道让这种画布效果不那么明显的方法吗?

【问题讨论】:

  • 您能说得更具体些吗?举个例子?

标签: javascript html animation graphics canvas


【解决方案1】:

我猜你遇到的问题是在清除前一个图像之前重新绘制新图像。我建议确保画布被清除,或者至少是图像被重新绘制的区域。虽然,我尝试清除整个画布与清除画布的特定部分,并达到一定大小(大约 800x600),但清除整个画布更快。

我在我的(正在进行的)游戏中使用画布:http://www.dacheng.me/dBoom

欢迎浏览JS源码!

【讨论】:

  • 我也在我的代码中做到了这一点。我将检查是否是我的 Mac Pro 上运行的 Windows 导致了此刷新率问题。
  • 我很好奇,我在你机器上玩的游戏会不会出现同样的问题?
  • 看到你的精灵很小,而且图像上不包含可读文本,很难分辨。
  • 我明白了,抱歉我没有其他建议:(
  • 感谢您的尝试。看来这只是目前对 HTML5 的限制。我为 git hub 游戏制作了我的游戏,我是唯一一个能说出来的人(因为我已经看了好几天了)。
【解决方案2】:

我认为您正在寻找的是窗口缓冲:

http://en.wikipedia.org/wiki/Multiple_buffering

基本上,这个想法是使用两个不同的窗口/画布元素,它们在完全绘制后互换,以便您在完全绘制的“框架”之间切换。这种技术用于 OpenGL 和当今几乎所有其他合法的图形程序。

【讨论】:

  • 我看到很多人将 requestanimation frame 与这个想法混合在一起。我想知道 IE 是如何实现这一点的,因为 IE 中没有 webgl
  • 我并不是在暗示使用 webgl,只是转移了你所说的窗口缓冲的概念,可能已经用 requestanimation 框架完成了 - 虽然我不确定。
  • 我只是想知道我可以采取哪些步骤来摆脱这个问题,或者它是否是画布特定的问题。
猜你喜欢
  • 1970-01-01
  • 2011-12-25
  • 2015-06-18
  • 1970-01-01
  • 2014-07-24
  • 2016-09-16
  • 2017-05-26
  • 2016-08-10
  • 2015-08-13
相关资源
最近更新 更多