HTML5畫布：如何動畫上下文？

有沒有什麼辦法如何在HTML5 canvas 2d中動畫上下文？HTML5畫布：如何動畫上下文？

我想創造巨大的背景下，而是在屏幕上顯示的它只是很小的一部分。然後，我想應用translate動畫來滾動上下文以顯示上下文的其他部分。

我應該怎麼做？

動畫是通過週期性地重繪畫布實現。如果您對如何操作有特殊疑問，我會很樂意提供幫助。 – akonsu

所以，如果我理解正確，那麼沒有辦法做到這一點。我需要做一個基本的動畫，整個「形象」慢慢轉移。圖像將主要由矩形（按需構建）構成。動畫必須非常流暢且時機非常精確。我正在研究CSS3，canvas2D和webgl，但我不知道選擇哪一個。 –

當然有辦法做到這一點。整個圖像有多大？您可以創建一個可以保存整個圖像的離線畫布，以及另一個可以附加到DOM的畫布，該畫布將只顯示大畫布的一部分。然後使用drawImage API將大圖的一部分繪製成小圖。 – akonsu

與包含要顯示整個事情，你可以通過使屏幕上的，如果你需要，所以你可以看到它的樣子做這方面創建一個畫布。

然後把你有什麼了製備和功能或者某種封閉的內括起來。然後使用document.createElement（'canvas'），並將其上下文用於您爲顯示上下文創建的代碼。

然後，您可以在可見畫布的主要上下文中使用.drawImage（），將其他上下文繪製到屏幕上，並在動畫循環中向上製作動畫。

我想我可能已經做出一點點更容易理解，更容易通過展示一個例子就明白了。

離屏渲染基本上是什麼，我試圖解釋。

2012-05-14 19:14:51 jaredwilli

回答