Javascript动画的效率,clearRect()?

为了准备Flash的堕落,我试图在AS3和
Javascript之间进行转换.

然而,有些事情让我困惑(可能是由于缺乏知识).在Flash中,我可以创建并显式修改我在舞台上绘制的对象的物理属性.在Canvas / HTML5中,我可以使用fillText()和fillRect(),但是我不能“动画”而不必先清除整个舞台然后重绘所有内容,这对我来说效率非常低.除此之外,我没有对这些对象的显式访问权限,因此我可以修改它们的物理属性,而不必首先删除所有内容.

我应该如何区别对待?

最佳答案 在所有位图中,您看到动画的位图必须被清除或覆盖,包括Flash.

不同之处在于Flash会为您处理它,而在画布上您必须自己处理它或使用诸如Kinect之类的库来平滑从Flash到HTML5 Canvas的过渡.

至于效率,clearRect()是清除画布的第二个最有效的方法.更快的方式(至少在某些浏览器中)是通过设置canvas.width = canvas.width;.但我不会推荐它有两个原因:

>这是“hackish”.
>在所有浏览器中都没有这样的工作(我最后一次检查Safari是最后一次).

您可以使用drawImage()代替clearRect(),只要不进行缩放,它就会很快.当然,如果您打算用图像填充背景(甚至是离屏画布),这当然有用.

而fillRect()并不是真正用于此用途的,而且是最慢的.

将此与requestAnimationFrame结合使用,您将在此上下文中拥有最有效的组合.话虽如此:Canvas的瓶颈本身就是JavaScript本身,所以我建议加大力度使代码高效.有许多令人印象深刻的演示只使用帆布.

点赞