爲什麼畫布會重新渲染整個畫布而不是僅顯示特定部分？

Question

從我非常有限的html5畫布體驗中，看起來動畫的方法是清除整個畫布，並從頭開始繪製所有內容。

這似乎不是很高效。我想知道爲什麼這是選擇的方法？

是否有替代方案？例如，使用面向對象的方法，如果你想在前臺重新渲染一棵樹，系統應該緩存背景，並且只渲染那個圖層。

Answer 1

你的理解是正確的。

典型的畫布應用程序將完全擦除畫布並重繪對象。

這個過程很有效，因爲Html Canvas的設計速度非常快。

與面向對象的設計不同，繪製在畫布上的數據已經完全「變平」。

存在單個數據數組，其中包含畫布上所有像素的紅色，綠色，藍色& Alpha組件。

[ 
    pixel1Red, pixel1Green, pixel1Blue, pixel1Alpha, 
    pixel2Red, pixel2Green, pixel2Blue, pixel2Alpha, 
    pixel3Red, pixel3Green, pixel3Blue, pixel3Alpha, 
    ... 
] 

這意味着任何像素的任何顏色分量都可以用一次跳轉來訪問。

這個扁平結構還意味着如果需要在畫布上繪製圖像，瀏覽器只需要將來自源圖像的連續數據直接複製到畫布像素數組中的連續數據。

此外，當GPU可用時，Canvas會硬件加速。

Answer 2

這是基本的技術，是的。你也可以清除畫布的特定區域，而不是使用clearRect()：

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

// Clear the specified rectangular area from x, y through width, height. 
context.clearRect(x, y, width, height); 

在你改變前景和背景的情況下，然而，考慮修改globalCompositeOperation，使您能夠繪製形狀下現有形狀：

// Draw new shapes behind the existing canvas content. 
ctx.globalCompositeOperation = 'destination-over'; 

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

另一種有用的方法是clip()，它允許你繪製形狀作爲掩模：

// Create a circular clipping path. 
ctx.beginPath(); 
ctx.arc(0, 0, 60, 0, Math.PI * 2, true); 
ctx.clip(); 

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing