这个stackoverflow问题的答案有效地说明了追溯绘制矩形的步骤：
fillRect
通过做：
clearRect
首先，当我阅读此答案时，我想只是在画布的整个宽度和高度上绘制一个白框。
在仔细考虑了Canvas元素如何保存和恢复以及它实现a的事实之后clearRect，这是否意味着如果进行每100毫秒重绘整个条形图之类的操作，仅绘制另一个大矩形可能会占用资源。
最初每100毫秒绘制一个条形图，使条形图彼此重叠，因此无法看到新条形图，因为它们已被分层。
但是现在，还要绘制一个白色矩形，就意味着要绘制，分层许多矩形，并且Canvas元素似乎可以跟踪这些矩形吗？
这是否意味着可以有效地重载元素，或重载浏览器？
画布不跟踪绘制操作，但是跟踪状态。以及各个像素的颜色值。如果您绘制红色矩形，则实际上将状态设置为“绘制红色”，然后将像素的矩形区域设置为当前绘制的颜色（除了在顶部绘制红色以外，还有其他绘制操作，但我没有有经验，所以除了他们存在之外，我无法告诉您其他任何信息）
出于性能方面的考虑，您希望（除其他事项外）最小化
之间的差别clearRect，并width = width是clearRect清除了在给定区域的像素数据，同时width = width清除所有像素数据和所有国家一样，转换和样式。我认为您已经看到了区别，还有很多需要考虑的事情（例如Garbage Collection阻止您的drawloop是其中之一），但这会有些偏离主题。
我不确定浏览器过载的含义。如果您的意思是阻止并使UI无响应，那么是的，因为JavaScript是单线程的，并且可以通过多种方法来实现它，所以这将是可能会发生的事情，但是很可能没有这样合理的操作:)
绘制最糟糕的事情是在慢速的CPU上使它变得断断续续。为您的drawloop使用requestAnimationFrame()而不是setTimeout()（我假设您当前使用的原因是因为您提到了100ms）几乎总是一种确保您的绘图不会阻塞UI的好方法。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句