画布层和游戏动画答案

【问题标题】：Canvas layers and game animation画布层和游戏动画
【发布时间】：2013-07-02 21:42:26
【问题描述】：

我想知道如何解决这个问题？绘制，等待 1 秒 draw frame2 等待 1 秒 draw frame3 等待 1 秒。清除动画画布

现在我假设您必须在重叠的画布上执行此操作这样它就不会被我当前的游戏刷新在 60 时擦除帧率。

我还将动画帧设置为透明 png 所以你也可以看到它背后的东西。想想烟雾动画。

等待 1 秒的最佳方法是使用设置间隔还是设置超时？我已经在我的主画布层上使用了 set animframerate

我需要知道如何在其他动画进行时制作动画，因为我的头脑告诉我，在屏幕上绘画是程序性的，所以如果调用一个方法来制作动画，其他一切都会在动画制作时停止。

【问题讨论】：

【解决方案1】：

在单独的画布上绘图是拥有多个图层的好方法，但有几种方法可以随心所欲：

如果您的 PNG 图像是预定义的，您可以使用 context.drawImage() 将其直接渲染到画布上。透明度将被保留。只要您的图片在渲染之前加载到页面上，每帧重新渲染它的开销就会很小。
您可以绘制到隐藏的画布，然后将该画布绘制到您的主画布上。您可以通过在 JavaScript 中创建一个画布而不将其写入页面来做到这一点。例如：var layer = document.createElement('canvas');，然后以layer 作为image 参数调用context.drawImage()。我编写了一个 Layer class 的实现，您可以使用它来简化此操作。
您可以通过设置图形上下文对象的globalAlpha 属性使用透明度直接在主画布上绘图。（请记住在绘制完透明内容后将其设置回 1。）
您可以在绝对位于主画布上方的辅助可见画布上绘图。为此，您需要将辅助画布的 CSS background-color 设置为 transparent。

同样，等待一秒有两种好方法：

使用setTimeout 或setInterval。这将等待尽可能接近您的延迟时间（在本例中为一秒），然后异步执行回调。如果您想执行某事一次，请使用setTimeout，如果您想以预定义的时间间隔无限期（即每秒）执行某事，请使用setInterval。
保留一个变量来保存您上次执行要运行的函数的时间，并检查在再次运行代码之前您是否等待了足够长的时间。这将同步运行代码。例如：
```
// Outside of your animation loop
var lastRun = Date.now();
// Inside your animation loop
if (lastRun + 1000 < Date.now()) {
    /* Run you callback code */
}
```
由于您使用requestAnimationFrame 运行主动画循环，这将在您的延迟（例如 1 秒）之后的最短时间运行，此时浏览器准备好绘制新帧。请注意，如果您希望使用此方法的代码异步运行，也可以使用web workers。

除非您将文本绘制到画布上而不缓存它或将数千个对象绘制到画布上，否则您的性能很有可能不受绘制限制，因此我会选择最简单的解决方案，即使它不是异步的.您可以使用stats.js 库来测试您的画布性能。

【讨论】：