在尝试了合成操作和在画布上绘制图像后,我现在试图删除图像和合成。我怎么做呢?

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


当前回答

使用clearRect方法通过传递x,y坐标和画布的高度和宽度。ClearRect将清除整个画布:

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

其他回答

在webkit中,您需要将宽度设置为不同的值,然后您可以将其设置回初始值

我发现在我测试的所有浏览器中,最快的方法是用白色填充rect,或者任何你想要的颜色。我有一个非常大的显示器,在全屏模式下,clearRect非常慢,但fillRect是合理的。

context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width, canvas.height);

缺点是画布不再是透明的。

如果你在画线条,请确保不要忘记:

context.beginPath();

否则这些行就不会被清除。

这是我使用的,不管边界和矩阵变换:

function clearCanvas(canvas) {
  const ctx = canvas.getContext('2d');
  ctx.save();
  ctx.globalCompositeOperation = 'copy';
  ctx.strokeStyle = 'transparent';
  ctx.beginPath();
  ctx.lineTo(0, 0);
  ctx.stroke();
  ctx.restore();
}

基本上,它保存了上下文的当前状态,并以globalCompositeOperation为copy绘制了一个透明像素。然后,恢复以前的上下文状态。

一个快速的方法就是去做

canvas.width = canvas.width

我不知道它是如何工作的,但它确实如此!