替代HTML5畫布清除方法

Question

這個stackoverflow問題的答案有效地說明了追溯繪制矩形的步驟：

fillRect

通過做：

clearRect

首先，當我閱讀此答案時，我想只是在畫布的整個寬度和高度上繪制一個白框。

在clearRect考慮了Canvas元素如何保存和恢復以及實現了clearRect的事實clearRect ，這是否意味着如果進行每100毫秒重繪整個條形圖之類的操作，僅繪制另一個大矩形就可能會clearRect資源。

最初每100毫秒繪制一個條形圖，使條形圖彼此重疊，因此無法看到新條形圖，因為它們是分層的。

但是現在，還要繪制一個白色矩形，就意味着要繪制，分層許多矩形，並且Canvas元素似乎可以跟蹤這些矩形嗎？

這是否意味着可以有效地重載元素，或重載瀏覽器？

Answer 1

畫布不跟蹤繪制操作，但跟蹤狀態。 以及各個像素的顏色值。 如果您繪制紅色矩形，則實際上將狀態設置為“繪制紅色”，然后將像素的矩形區域設置為當前繪制的顏色（除了在頂部繪制紅色以外，還有其他繪制操作，但我沒有有經驗，所以除了他們存在之外，我無法告訴您其他任何信息）

出於性能方面的考慮，您希望（除其他事項外）最小化

• 您更改的像素數量
• 您更改狀態的數量

clearRect和width = width之間的區別在於， clearRect清除給定區域中的像素數據，而width = width清除所有像素數據和所有狀態，例如變換和樣式。 我認為您已經看到了區別，還有很多需要考慮的事情（例如Garbage Collection阻止您的drawloop是其中之一），但這會有些偏離主題。

我不確定瀏覽器過載的含義。 如果您的意思是阻止並使UI無響應，那么是的，因為JavaScript是單線程的，並且可以通過多種方法來實現它，所以這將是可能會發生的事情，但是很可能沒有這樣合理的操作:)

繪制最糟糕的事情是在慢速的CPU上使它變得斷斷續續。 使用requestAnimationFrame()而不是setTimeout() （我假設您當前使用它是因為提到了100ms）作為繪制循環，這幾乎始終是確保繪圖不會阻塞UI的好方法。

Answer 2

“畫布”元素會跟蹤這些[矩形]

據我所知，它不跟蹤繪畫操作。 （這取決於實現，但是我不知道有任何實現。）您可能正在考慮它如何保存和恢復諸如變換和繪制顏色之類的東西。