替代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

“画布”元素会跟踪这些[矩形]

据我所知，它不跟踪绘画操作。 （这取决于实现，但是我不知道有任何实现。）您可能正在考虑它如何保存和恢复诸如变换和绘制颜色之类的东西。