【问题标题】：When to clear a canvas when redrawing images重绘图像时何时清除画布
【发布时间】：2015-11-18 03:06:26
【问题描述】：

我正在开发一个从网络摄像头进行面部检测的网络应用程序。我正在使用 WebRTC，并使用 ctx.drawImage() 方法将 video 元素绘制到画布中。

在这张图片的顶部，我画了一个矩形来勾勒出脸部的轮廓。如果网络摄像头 fps 为 15，我会重复 15 次。但我不会在任何地方清除画布。在将网络摄像头内容流式传输到画布并进行人脸检测几分钟后，我没有看到任何延迟。

我尝试在 chrome devtools 中使用内存分析器来查看是否存在一些令人担忧的峰值。我有点担心，因为那里没有有任何可疑的事情发生。但是应该有一个尖峰吧？我的意思是，我每隔几毫秒就在画布上重新绘制一个图像。这是否意味着，我将每个框架的图层和一个矩形堆叠在另一个之上。一秒钟就会有15个这样的层！这对我来说听起来很可怕。

我想了解，我应该如何调试画布分析功能。我意识到它在Chrome 44 之后被删除了。此外，任何人都经历过同样的情况，那么显示每一帧的最佳方式是什么。我不应该在每一帧之后清除画布吗？如果我应该清除它，那么最好的方法是什么。我希望我能在这里解释我的问题。

编辑

适用于希望看到此功能的人。按照@touko 的建议，我整理了一个简单的fiddle 来演示clearRect。取消注释最后一行，它会完全清除它。没有图层。

【问题讨论】：

标签： javascript html canvas profiling

【解决方案1】：

每次你在画布上绘制东西时，它都会覆盖该位置的当前信息 -> 一个画布上永远不会有多个“层”。

例如。你必须调用 clearRect 来“清除”画布

【讨论】：

那么，如果画布从来没有多层，为什么要使用clearRect？很抱歉，我想我不能完全理解你的意思。
我明白你的意思。放在一起fiddle 完全理解它。感谢您的及时回复！
ClearRect 用于清除画布。假设你已经画了两个圆，现在你想画一个矩形但删除圆。在这种情况下，您将需要清除将擦除圆圈然后绘制矩形的画布。结帐：stackoverflow.com/questions/33743699/…