协慌网

在尝试复合操作和在画布上绘制图像后，我现在正在尝试删除图像和合成。我该怎么做呢？

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

const context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height);

使用： context.clearRect(0, 0, canvas.width, canvas.height);

这是清除整个画布的最快且最具描述性的方法。

不要使用： canvas.width = canvas.width;

重置canvas.width重置所有画布状态（例如转换，lineWidth，strokeStyle 等），它非常慢（与 clearRect 相比），它在所有浏览器中都不起作用，并且它没有描述你实际尝试的内容去做。

处理变换后的坐标

如果您修改了变换矩阵（例如，使用scale ， rotate或translate ），则context.clearRect(0,0,canvas.width,canvas.height)可能不会清除画布的整个可见部分。

解决方案？在清除画布之前重置转换矩阵：

// Store the current transformation matrix
context.save();

// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);

// Restore the transform
context.restore();

编辑：我刚刚完成了一些分析，并且（在 Chrome 中）在不重置转换的情况下清除 300x150（默认大小）画布的速度提高了约 10％。随着画布的大小增加，这种差异会下降。

这已经相对微不足道了，但在大多数情况下，你的吸引力远远超过清理范围，我相信这种性能差异无关紧要。

100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear

如果你画线，请确保你不要忘记：

context.beginPath();

否则线路将不会被清除。