javascript - HTML5 画布：如何为上下文设置动画？

Question

有什么方法可以在 HTML5 canvas 2d 中为上下文设置动画？

我想创建巨大的上下文，但只在屏幕上显示其中的一小部分。然后我想应用translate动画来滚动上下文以显示上下文的其他部分。

我该怎么做？

Answer 1

创建一个包含您要显示的全部内容的上下文的画布，如果需要，您可以将其显示在屏幕上，这样您就可以看到它的样子。

然后把你所拥有的东西放在一个函数或某种闭包中。然后使用 document.createElement('canvas')，并将它的上下文用于您为显示上下文创建的代码。

然后，您可以在可见画布的主要上下文中使用 .drawImage() 将其他上下文绘制到屏幕上，并在动画循环中向上设置动画。

我希望我能让它更容易理解，通过展示一个例子更容易理解。

离屏渲染本质上是我想要解释的。