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

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


当前回答

现在有一个.reset()方法,它不仅会清除画布缓冲区,还会完全重置上下文的所有属性(样式等),重置它的转换矩阵,清除它的当前子路径,清除它的状态堆栈(由save()和restore()控制),并删除所有的剪辑区域。

context.reset();
// now 'context' is clear as new

基本上,它具有与canvas相同的效果。Width += 0,除了它更习惯。

然而,在当前的Chromium实现中,它似乎和canvas一样慢。Width += 0时,它也会生成一个新的缓冲区,而不是简单地清除前一个缓冲区(导致更多的内存垃圾)。另一个警告是,它目前只在铬浏览器中支持。 虽然要填充它,你可以去Chrome的方式

if (!CanvasRenderingContext2D.prototype.reset) {
  CanvasRenderingContext2D.prototype.reset = function() {
    this.canvas.width += 0;
  };
}
if (!OffscreenCanvasRenderingContext2D.prototype.reset) {
  OffscreenCanvasRenderingContext2D.prototype.reset = function() {
    this.canvas.width += 0;
  };
}

其他回答

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

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

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

Context.clearRect(starting width, starting height, ending width, ending height);

例如:上下文。clearRect(0,0, canvas.)宽度,canvas.height);

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

context.beginPath();

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

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

用JavaScript定义一个全局变量:

var clearCanvas = false;

从你的PaperScript定义:

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

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

一种简单但不太好读的方式是这样写的:

var canvas = document.getElementId('canvas');

// after doing some rendering

canvas.width = canvas.width;  // clear the whole canvas