RequestAnimationFrame多個畫布

Question

我有一個分層的<canvas>元素的頁面，如解答在答案here。畫布一起組成一個動畫，所以每個都被清除並根據需要重繪。

現在我試圖通過使用cross browser shim合併​​。但我真的不知道在幕後做什麼​​。

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

Answer 1

更新所有的畫布在單個​​是完全沒有問題。

如果畫布彼此獨立並出現在頁面的不同部分，則可能需要使用個別的​​處理程序，並將canvas元素作爲第二個參數傳遞。這樣，只有當前可見的畫布得到更新。 （儘管傳遞元素作爲第二個參數是WebKit特有的）。

​​所做的是告訴瀏覽器您想更新頁面的外觀。瀏覽器在頁面或元素下次重新繪製時調用回調。當頁面/元素可見時，就會發生這種情況，並且永遠不會比屏幕刷新率更高。

Answer 2

如果墊片不可用，墊片只能返回到計時器。

你應該沒問題。在同一個單一循環中更新它們全部。

requestAnimFrame不是「綁定」到畫布或任何東西，只是你傳遞它的函數。所以你可以使用它與三個畫布或零帆布就好。

Answer 3

使用​​只需讓瀏覽器在頁面上進行迴流/重繪時進行控制。

在一次回調中更改所有畫布會更好，因此瀏覽器可以一次重畫它們。

This explanation of requestAnimationFrame was pretty helpful