如何清除画布以重新绘制

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