在尝试了合成操作和在画布上绘制图像后,我现在试图删除图像和合成。我怎么做呢?
我需要清除画布重绘其他图像;这可能会持续一段时间,所以我不认为每次都画一个新的矩形是最有效的选择。
在尝试了合成操作和在画布上绘制图像后,我现在试图删除图像和合成。我怎么做呢?
我需要清除画布重绘其他图像;这可能会持续一段时间,所以我不认为每次都画一个新的矩形是最有效的选择。
当前回答
我发现在我测试的所有浏览器中,最快的方法是用白色填充rect,或者任何你想要的颜色。我有一个非常大的显示器,在全屏模式下,clearRect非常慢,但fillRect是合理的。
context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width, canvas.height);
缺点是画布不再是透明的。
其他回答
这里有很多很好的答案。 还有一点需要注意的是,有时候只清除部分画布也很有趣。 也就是说,“淡出”之前的图像,而不是完全擦除它。 这样可以产生很好的轨迹效果。
很容易。假设你的背景颜色是白色:
// 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);
这些都是如何清除标准画布的好例子,但如果你使用的是paperjs,那么这将工作:
用JavaScript定义一个全局变量:
var clearCanvas = false;
从你的PaperScript定义:
function onFrame(event){
if(clearCanvas && project.activeLayer.hasChildren()){
project.activeLayer.removeChildren();
clearCanvas = false;
}
}
现在无论你在哪里设置clearCanvas为true,它都会从屏幕上清除所有的项目。
private clearCanvas() {
const canvas: HTMLCanvasElement = this.ctx.canvas
this.ctx.save()
this.ctx.setTransform(1, 0, 0, 1, 0, 0)
this.ctx.clearRect(0, 0, canvas.width, canvas.height)
this.ctx.restore()
}
一个快速的方法就是去做
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;
}