javascript - Javascript动画的效率，clearRect()？

Question

为准备 Flash 的衰落，我正在尝试在 AS3 和 Javascript 之间转换。

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

我应该如何以不同的方式处理这个问题？

Answer 1

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

不同之处在于 Flash 会为您处理，而在 Canvas 上您必须自己处理或使用诸如 Kinect 之类的库。可以平滑地从 Flash 过渡到 HTML5 Canvas。

至于效率，clearRect() 是清除 Canvas 效率第二高的事情。一种更快的方法(至少在某些浏览器中)是设置 canvas.width = canvas.width;。但我不会推荐它，原因有二:

1. 这是“hackish”。
2. 它并不是在所有浏览器中都能正常工作(Safari 是我最后一次检查的浏览器)。

您可以使用 drawImage() 而不是 clearRect()，只要不发生缩放，它也很快。这当然只有在您打算用图像(甚至是屏幕外的 Canvas )填充背景时才有用。

还有 fillRect() 并不是真正为这种用途而设计的，它是其中最慢的。

将其与 requestAnimationFrame 结合使用，您将获得在此上下文中最有效的组合。话虽这么说:Canvas 的瓶颈实际上是 JavaScript 本身，所以我建议在这方面努力提高代码效率。有许多仅使用 Canvas 的令人印象深刻的演示。