來自圖像源的Canvas Pixel動畫

Question

我在了解canvas javascript API時遇到了一些問題。 我想做的是在內存中加載兩個png，以便我擁有它們的字節數組，並使用requestAnimationFrame循環進行一些動畫處理。

但是我喜歡加載它們而不在內存中僅顯示它們，並訪問某些動畫效果的字節。

問題是，我該怎么做。 通過觀察，我知道可以通過getImageData從canvas獲取字節。 但這需要將畫布附加到DOM並進行drawImage調用。 這個對嗎？ 有沒有一種方法可以在不繪制或繪制任何內容的情況下加載字節？

然后，我想使用putImageData方法在屏幕上繪制動畫像素...？ 例如逐行或某些過渡效果...但是首先...如何在不顯示像素的情況下加載准備像素？

任何幫助，鏈接，指針都將非常棒！ 如果我走錯了路，請隨時糾正我。

Answer 1

不，畫布不需要在DOM中進行操作。 您可以僅使用JavaScript創建畫布。 他們通常將其稱為“背景畫布”，通常用於某些庫中的場景預渲染。

這是HTML5Doctor的演示 ，其中視頻被繪制到非DOM畫布上（在文章的最后部分。搜索“支持”）。 然后將其“刮掉”其像素數據進行處理，然后將其吐出到可見的畫布。

只需確保已加載圖像，然后再將其繪畫到畫布中即可。