Javascript动画的效率，clearRect（）？

Question

为准备掉线Flash，我正试图在AS3和Javascript之间进行转换。

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

我应该如何区别对待？

Answer 1

在所有位图中，您都会看到动画，必须清除或覆盖位图，包括Flash。

不同之处在于Flash会为你照顾它，而你在画布上必须自己处理它或者使用像Kinect这样的库来平滑从Flash到HTML5 Canvas的过渡。

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

1. 这是“hackish”。
2. 在所有浏览器中都没有这样的工作（Safari是我最后一次检查过的。）

只要不进行缩放，您就可以使用clearRect()代替drawImage()而不是fillRect()。当然，如果您打算用图像（甚至是离屏画布）填充背景，这当然有用。

并且requestAnimationFrame并非真正用于此用途，而且是最慢的。

将此与{{1}}相结合，您将在此上下文中获得最有效的组合。话虽如此：Canvas的瓶颈本身就是JavaScript本身，所以我建议加大力度使代码高效。有许多令人印象深刻的演示只使用画布。