Question

我想知道如何解决这个问题？画画，等一下画帧2等待1秒画帧3等待1秒。清晰的动画画布

现在我假设您必须在重叠的画布上执行此操作所以它不会被我当前60岁的游戏刷新所抹去 FPS。

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

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

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

Answer 1

绘制到单独的画布上是获得多个图层的好方法，但有几种方法可以实现您想要的效果：

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

同样，有两种好方法可以等一秒钟：

使用setTimeout或setInterval。这将等待尽可能接近您的延迟时间（在这种情况下为1秒），然后异步执行回调。如果你想执行一次某事，请使用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。

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