RequestAnimationFrame 用於多個畫布

Question

我有一個帶有分層<canvas>元素的頁面，如此處答案中所述。 畫布一起構成了 animation，因此每個畫布都在必要時被清除和重繪。

現在我正在嘗試通過使用跨瀏覽器 shim來合並requestAnimationFrame 。 但我真的不知道requestAnimationFrame在幕后做了什么。

可以讓它在每個循環中更新多個畫布嗎？ 每個 canvas 是否應該有自己的回路？ 答案瀏覽器是否依賴？

Answer 1

在單個requestAnimationFrame中更新所有畫布是完全可以的。

如果畫布彼此獨立並出現在頁面的不同部分，那么您可能需要使用單獨的requestAnimationFrame處理程序，將canvas元素作為第二個參數傳遞。 這樣，只有當前可見的畫布會得到更新。 （不過，將元素作為第二個參數傳遞是特定於 WebKit 的。）

requestAnimationFrame的作用是告訴瀏覽器您想要更新頁面的外觀。 當頁面或元素接下來要重繪時，瀏覽器會調用回調。 當頁面/元素可見時就會發生這種情況，並且永遠不會比屏幕刷新率更頻繁。

Answer 2

使用requestAnimationFrame只是讓瀏覽器控制頁面上何時發生重排/重繪。

最好在一個回調中更改所有畫布，以便瀏覽器可以在一個 go 中重新繪制它們。

requestAnimationFrame 的這個解釋很有幫助

Answer 3

如果墊片不可用，墊片只會退回到計時器。

你應該沒事。 在同一個循環中更新所有這些。

requestAnimFrame沒有“綁定”到 canvas 或任何東西，只是 function 你通過它。 因此，您可以將它與三個畫布或零個畫布一起使用就可以了。

Answer 4

在這種格式的 js 文件中使用 canvas 以便多個 canvas 的 RequestAnimationFrame 將起作用

(function(){ ... })();