为什么画布会重新渲染整个画布而不是仅显示特定部分？

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