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

Question

有没有办法如何在HTML5画布2d中设置上下文动画？

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

我该怎么做？

Answer 1

使用包含要显示的整个内容的上下文创建一个画布，您可以通过在屏幕上显示它来执行此操作（如果需要），以便您可以看到它的外观。

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

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

我希望我能够更容易理解，通过展示示例更容易理解。

离屏呈现基本上就是我要解释的内容。