替代HTML5 Canvas清除方法

Question

这个stackoverflow question的答案实际上是回溯绘制矩形所采取的步骤：

fillRect

做：

clearRect

首先，当我读到这个答案时，我想只画一个白色方框画布的整个宽度和高度。

在考虑了Canvas元素如何保存，恢复以及它实现clearRect的事实之后，这是否意味着简单地绘制另一个大矩形可能会占用资源，如果做一些重绘整个条形图每100毫秒。

最初每100毫秒绘制一个条形图，彼此重叠，因此无法看到新的条形图，因为它们正在分层。

但是现在，绘制一个白色矩形意味着许多矩形正在被绘制，分层并且Canvas元素似乎跟踪这些？

这是否意味着可以有效地重载元素，或者使浏览器过载？

Answer 1

画布不跟踪绘图操作，但它跟踪状态。和各个像素的颜色值。如果你绘制一个红色矩形，你实际上将状态设置为＆＃34;绘制红色＆＃34;然后将矩形像素区域设置为当前绘制的颜色（还有不同的其他绘图操作，而不仅仅是在顶部绘制红色，但我没有经验，所以我不能告诉你很多除此之外他们存在）

出于性能原因，您希望（在许多其他方面）最小化

• 您更改的像素数量
• 您更改的州数量

clearRect和width = width之间的区别在于clearRect清除了给定区域中的像素数据，而width = width清除了所有像素数据和所有状态，例如转换和风格。我认为你已经看到了不同之处，还有很多事情需要考虑（比如垃圾收集阻止你的drawloop就是其中之一），但这会有点偏离主题。

我不确定您对重载浏览器的意思。如果你的意思是阻止并使UI无响应，那么它是可以而且将会发生的事情，因为javascript是单线程的，并且有很多方法可以实现它，但很可能没有这样合理的操作：）< / p>

你可以用绘图做的最糟糕的事情就是让它在慢速CPU上变得非常不稳定。使用requestAnimationFrame()而不是setTimeout()（我假设你当前使用的因为你提到了100毫秒）你的drawloop几乎总是一个好的和安全的方法来确保你的绘图不会阻止UI。

Answer 2

  

Canvas元素跟踪这些[矩形]

据我所知，它并没有跟踪绘画操作。 （它取决于实现，但我不知道任何实现。）您可能正在考虑如何保存和恢复变换和绘制颜色等内容。