如何清除画布以重新绘制

Question

如何清除画布以重新绘制

在对复合操作进行实验并在画布上绘制图像之后，我现在正在尝试删除图像并进行组合。我该怎么做？

我需要清除画布，以重新绘制其他图像；这可以持续一段时间，所以我不认为每次绘制一个新的矩形将是最有效的选择。

Answer 1

如果你在画线，确保你不要忘记：context.beginPath();否则线路就不会被清除。

Answer 2

const context = canvas.getContext('2d');context.clearRect(0, 0, canvas.width, canvas.height);

Answer 3

用途：context.clearRect(0, 0, canvas.width, canvas.height);这是清除整个画布的最快和最具描述性的方法。不要使用：canvas.width = canvas.width;重置canvas.width重置所有画布状态(例如转换、线宽、点击样式等)，它非常慢(与ClearRect相比)，它并不能在所有浏览器中工作，也没有描述您实际要做的事情。处理转换坐标如果您修改了转换矩阵(例如，使用scale, rotate，或translate)然后context.clearRect(0,0,canvas.width,canvas.height)可能不会清除画布的整个可见部分。解决办法？在清除画布之前重置转换矩阵：// Store the current transformation matrixcontext.save(); // Use the identity matrix while clearing the canvascontext.setTransform(1, 0, 0, 1, 0, 0);context.clearRect(0, 0, canvas.width, canvas.height); // Restore the transformcontext.restore();编辑：我刚刚做了一些分析，并且(在Chrome中)在不重置转换的情况下清除300x150(默认大小)画布的速度大约快了10%。随着画布尺寸的增加，这种差异会下降。这已经是相对微不足道的，但在大多数情况下，您将比您正在清除的更多，我相信这种性能差异是无关紧要的。100000 iterations averaged 10 times:1885ms to clear2112ms to reset and clear