如何清除画布以重画

在尝试了复合操作并在画布上绘制图像之后，我现在尝试删除图像并进行合成。 我该怎么做呢？

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

---

#1楼

这些都是清除标准画布的绝佳示例，但是，如果您使用的是paperjs，则可以使用：

在JavaScript中定义全局变量：

var clearCanvas = false;

从PaperScript中定义：

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

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

---

#2楼

这里有很多好的答案。 还有一点要注意的是，有时只将画布部分清除是很有趣的。 也就是说，“淡出”先前的图像，而不是完全擦除它。 这可以给人留下深刻的印象。

这很容易。 假设您的背景色是白色：

// assuming background color = white and "eraseAlpha" is a value from 0 to 1.
myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")";
myContext.fillRect(0, 0, w, h);

---

#3楼

最快的方法：

canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

//... some drawing here

i = c.createImageData(canvas.width, canvas.height);
c.putImageData(i, 0, 0); // clear context by putting empty image data

---

#4楼

我发现，在我测试过的所有浏览器中，最快的方法是用白色或任何您想要的颜色填充Rect。 我有一个非常大的监视器，在全屏模式下，clearRect非常慢，但是fillRect是合理的。

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

缺点是画布不再透明。

---

#5楼

通过传递x，y坐标以及画布的高度和宽度来使用clearRect方法。 ClearRect会将整个画布清除为：

canvas = document.getElementById("canvas");
ctx = canvas