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

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


当前回答

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

context.beginPath();

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

其他回答

这些都是如何清除标准画布的好例子,但如果你使用的是paperjs,那么这将工作:

用JavaScript定义一个全局变量:

var clearCanvas = false;

从你的PaperScript定义:

function onFrame(event){
    if(clearCanvas && project.activeLayer.hasChildren()){
        project.activeLayer.removeChildren();
        clearCanvas = false;
    }
}

现在无论你在哪里设置clearCanvas为true,它都会从屏幕上清除所有的项目。

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

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绘制了一个透明像素。然后,恢复以前的上下文状态。

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

一个快速的方法就是去做

canvas.width = canvas.width

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

function clear(context, color)
{
    var tmp = context.fillStyle;
    context.fillStyle = color;
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillStyle = tmp;
}