在尝试合成操作并在画布上绘制图像后，我现在尝试删除图像和合成。我该怎么做呢？
我需要清除画布以重新绘制其他图像；这可能会持续一段时间，所以我不认为每次都绘制一个新的矩形是最有效的选择。
如何清除画布以重新绘制
IT技术
javascript
html
canvas
html5-canvas
composite
2021-01-24 03:49:05
6个回答
鉴于这canvas是一个画布元素或OffscreenCanvas对象，
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();
否则线条不会被清除。
其他人已经很好地回答了这个问题，但是如果clear()上下文对象上的一个简单方法对你有用（对我来说），这是我根据这里的答案使用的实现：
CanvasRenderingContext2D.prototype.clear =
CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
if (preserveTransform) {
this.save();
this.setTransform(1, 0, 0, 1, 0, 0);
}
this.clearRect(0, 0, this.canvas.width, this.canvas.height);
if (preserveTransform) {
this.restore();
}
};
用法：
window.onload = function () {
var canvas = document.getElementById('canvasId');
var context = canvas.getContext('2d');
// do some drawing
context.clear();
// do some more drawing
context.setTransform(-1, 0, 0, 1, 200, 200);
// do some drawing with the new transform
context.clear(true);
// draw more, still using the preserved transform
};
这是 2018 年，仍然没有本地方法可以完全清除画布以进行重绘。clearRect() 不会完全清除画布。非填充类型的图纸不会被清除（例如rect()）
1.无论您如何绘制，都要完全清除画布：
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();
优点：保留strokeStyle、fillStyle等；没有滞后；
缺点：如果您在绘制任何内容之前已经使用了 beginPath，则不需要
2.使用宽度/高度黑客：
context.canvas.width = context.canvas.width;
或者
context.canvas.height = context.canvas.height;
优点：适用于 IE 缺点：将strokeStyle、fillStyle 重置为黑色；迟钝；
我想知道为什么不存在本机解决方案。实际上，clearRect()被认为是单线解决方案，因为大多数用户beginPath()在绘制任何新路径之前都会这样做。虽然 beginPath 只在绘制线条时使用，而不是像rect().
这就是为什么接受的答案没有解决我的问题并且我最终浪费了几个小时尝试不同的黑客的原因。诅咒你 mozilla