HTML5 canvas：如何為上下文設置動畫？

Question

有什么方法可以在HTML5 canvas 2d中設置上下文動畫嗎？

我想創建一個巨大的上下文，但只在屏幕上顯示一小部分。 然后，我想應用translate動畫來滾動上下文以顯示上下文的其他部分。

我該怎么辦？

Answer 1

創建一個具有包含要顯示的整個內容的上下文的畫布，可以通過在需要時將其顯示在屏幕上來做到這一點，以便可以看到它的外觀。

然后，將要實現的功能包含在函數或某種閉包中。 然后使用document.createElement（'canvas'），並將其上下文用作您為顯示上下文創建的代碼。

然后，當您在可見畫布的主上下文中時，可以使用.drawImage（）將另一個上下文繪制到屏幕上，並在動畫循環中向上對其進行動畫處理。

我希望我可以使它更容易理解，並通過顯示一個示例使其更容易理解。

屏幕外渲染本質上就是我要解釋的內容。