重绘图像时何时清除 canvas
When to clear a canvas when redrawing images
我正在开发一个网络应用程序，可以从网络摄像头进行人脸检测。我正在使用 WebRTC，我使用 ctx.drawImage() 方法将 video 元素绘制到 canvas 中。
在这张图片的顶部，我画了一个矩形来勾勒出脸部轮廓。如果网络摄像头 fps 为 15，我将重复此操作 15 次。但我没有在任何地方清除 canvas。将网络摄像头内容流式传输到 canvas 并进行人脸检测几分钟后，我没有看到任何延迟。
我尝试使用 chrome devtools 中的内存分析器来查看是否存在一些令人担忧的尖峰。我有点担心，因为 NOT 那里没有任何可疑的事情发生。但是应该有尖峰吧？我的意思是，我每隔几毫秒就在 canvas 上重新绘制图像。这是否意味着，我会将每一帧的图层和一个矩形堆叠在另一个框架之上。一秒钟会有15个这样的层！这听起来让我很震惊。
我想了解，我应该如何调试 canvas 分析功能。我意识到它在 Chrome 44 之后被删除了。此外，任何经历过相同情况的人，那么显示每一帧的最佳方式是什么。我是否不必在每帧后清除 canvas ？如果我应该清除它，那么最好的方法是什么。我希望我能在这里解释我的问题。
编辑
- 对于想要看到实际效果的人。我整理了一个简单的 fiddle 来演示 @touko 所建议的
clearRect。取消注释最后一行，它将完全清除。没有图层。
每次您在 canvas 上绘制内容时，它都会覆盖该位置的当前信息 -> 一个 canvas 永远不会有多个 'layers'。
例如。您必须调用 clearRect，它实际上是将新数据写入 canvas、'clear' 和 canvas
我正在开发一个网络应用程序，可以从网络摄像头进行人脸检测。我正在使用 WebRTC，我使用 ctx.drawImage() 方法将 video 元素绘制到 canvas 中。
在这张图片的顶部，我画了一个矩形来勾勒出脸部轮廓。如果网络摄像头 fps 为 15，我将重复此操作 15 次。但我没有在任何地方清除 canvas。将网络摄像头内容流式传输到 canvas 并进行人脸检测几分钟后，我没有看到任何延迟。
我尝试使用 chrome devtools 中的内存分析器来查看是否存在一些令人担忧的尖峰。我有点担心，因为 NOT 那里没有任何可疑的事情发生。但是应该有尖峰吧？我的意思是，我每隔几毫秒就在 canvas 上重新绘制图像。这是否意味着，我会将每一帧的图层和一个矩形堆叠在另一个框架之上。一秒钟会有15个这样的层！这听起来让我很震惊。
我想了解，我应该如何调试 canvas 分析功能。我意识到它在 Chrome 44 之后被删除了。此外，任何经历过相同情况的人，那么显示每一帧的最佳方式是什么。我是否不必在每帧后清除 canvas ？如果我应该清除它，那么最好的方法是什么。我希望我能在这里解释我的问题。
编辑
- 对于想要看到实际效果的人。我整理了一个简单的 fiddle 来演示 @touko 所建议的
clearRect。取消注释最后一行，它将完全清除。没有图层。
每次您在 canvas 上绘制内容时，它都会覆盖该位置的当前信息 -> 一个 canvas 永远不会有多个 'layers'。
例如。您必须调用 clearRect，它实际上是将新数据写入 canvas、'clear' 和 canvas