如何清除画布以进行重绘
在画布上试验合成操作和绘制图像之后，我现在试图去除图像和合成。 我该怎么做呢？
我需要清除画布以重绘其他图像; 这可能会持续一段时间，所以我不认为每次绘制新的矩形都是最有效的选择。
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();
否则，行不会被清除。
链接地址: http://www.djcxy.com/p/44959.html