重绘图像时何时清除画布

Question

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

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

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

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

编辑

1. 对于想要看到这一点的人。 我已经按照clearRect建议整理了一个简单的小提琴来演示 clearRect。 取消对最后一行的注释，它会完全清除它。 没有层。

Answer 1

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

例如。 您必须调用 clearRect，它本质上是将新数据写入画布，以“清除”画布