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

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

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

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

修改

对于想要在行动中看到这一点的人。我已经按照@touko的建议组合了一个简单的fiddle来演示clearRect。取消注释最后一行，它完全清除它。没有层。

何时在重绘图像时清除画布

修改

1 个答案: