0

我想知道该怎么做？绘制，等待 1 秒并条框 2 等待 1 秒并条框 3 等待 1 秒。清除动画画布

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

我还将动画帧设置为透明 png，这样你也可以看到它背后的内容。想想烟雾动画。

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

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

4

1 回答 1

1

在单独的画布上绘图是拥有多个图层的好方法，但是有几种方法可以做你想做的事：

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

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

  1. 使用setTimeout或setInterval。这将等待尽可能接近您的延迟时间（在本例中为一秒），然后异步执行回调。如果setTimeout您想执行某事一次并且setInterval如果您想以预定义的时间间隔无限期地执行某事（即每秒），请使用此选项。

  2. 保留一个变量来保存您上次执行要运行的函数的时间，并检查在再次运行代码之前是否等待了足够长的时间。这将同步运行代码。例如：

    // 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库来测试您的画布性能。

于 2013-07-04T21:06:36.137 回答