Question

从我非常有限的html5画布体验来看，似乎动画效果的方法是清除整个画布，并从头开始绘制所有内容。

这似乎不太高效。我想知道为什么这是选择的方法？

还有其他选择吗？例如，使用面向对象的方法，如果您想在前台重新渲染树，系统应该缓存背景，并且只重新渲染该层。

Answer 1

您的理解是正确的。

典型的画布应用程序将完全删除画布和重绘对象。

这个过程很有效，因为Html Canvas的绘制速度非常快。

与面向对象的设计不同，绘制在画布上的数据已经完全平整了＃34;

有一个数据阵列包含红色，绿色，蓝色和蓝色。画布上所有像素的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

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

2 个答案: