如何清除画布以进行重绘

给定画布元素或屏幕外Canvas对象，canvas

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;

重置会重置所有画布状态（例如转换，lineWidth，strokeStyle等），它非常慢（与clearRect相比），它不适用于所有浏览器，并且它没有描述您实际尝试执行的操作。canvas.width

处理变换后的坐标

如果您修改了转换矩阵（例如，使用 、 或 ），则可能无法清除画布的整个可见部分。scalerotatetranslatecontext.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