在尝试了合成操作和在画布上绘制图像后,我现在试图删除图像和合成。我怎么做呢?
我需要清除画布重绘其他图像;这可能会持续一段时间,所以我不认为每次都画一个新的矩形是最有效的选择。
在尝试了合成操作和在画布上绘制图像后,我现在试图删除图像和合成。我怎么做呢?
我需要清除画布重绘其他图像;这可能会持续一段时间,所以我不认为每次都画一个新的矩形是最有效的选择。
当前回答
使用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
我不知道它是如何工作的,但它确实如此!