javascript - 替代 HTML5 Canvas 清除方法

Question

这个 stackoverflow question 的答案有效地说要回溯绘制矩形所采取的步骤:

fillRect

通过做:

clearRect

首先，当我阅读这个答案时，我想只在 Canvas 的整个宽度和高度上绘制一个白框。

在仔细考虑了 Canvas 元素如何保存和恢复以及它实现了 clearRect 之后，这是否意味着简单地绘制另一个大矩形会消耗资源，如果做类似的事情每 100 毫秒重新绘制整个条形图。

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

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

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

Answer 1

Canvas 不跟踪绘图操作，但它跟踪状态。以及各个像素的颜色值。如果你绘制一个红色矩形，你实际上将状态设置为“绘制红色”，然后将一个矩形像素区域设置为当前绘制的颜色(除了在顶部绘制红色之外，还有其他不同的绘制操作，但我没有有经验，所以除了它们存在之外我不能告诉你太多)

出于性能原因，您希望(除其他外)最小化

• 您更改的像素数量
• 你改变的状态数量

clearRect和width = width的区别在于clearRect清除给定区域的像素数据，而width = width 清除所有像素数据和所有状态，如转换和样式。我想您已经看到了区别，还有很多事情需要考虑(比如垃圾收集阻止您的 drawloop 成为一个)，但这会有点偏离主题。

我不确定您所说的浏览器过载是什么意思。如果您的意思是阻塞并使 UI 无响应，那么是的，这是一件可以而且将会发生的事情，因为 javascript 是单线程的，并且有很多方法可以实现它，但很可能不会通过这样一个合理的操作:)

对于绘图，你能做的最糟糕的事情就是在低速 CPU 上让它 super 不稳定。使用 requestAnimationFrame() 而不是 setTimeout()(我假设你目前使用它，因为你提到了 100ms)对于你的 drawloop(s) 几乎总是一个好的和安全的方式确保您的绘图不会阻挡 UI。