如何清除画布重绘

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

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

当前回答

我总是用这个

ctx.clearRect(0, 0, canvas.width, canvas.height)
window.requestAnimationFrame(functionToBeCalled)

NOTE

结合clearRect和requestAnimationFrame允许更流畅的动画，如果这是你想要的

2020-03-27 19:48:29

其他回答

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

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

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

2013-03-25 22:29:13

我总是用这个

ctx.clearRect(0, 0, canvas.width, canvas.height)
window.requestAnimationFrame(functionToBeCalled)

NOTE

结合clearRect和requestAnimationFrame允许更流畅的动画，如果这是你想要的

2020-03-27 19:48:29

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()
}

2021-12-08 11:30:08

假设canvas是一个canvas元素或者OffscreenCanvas对象，使用clearRect:

const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

2010-01-26 20:52:18

最短的方法:

canvas.width += 0

2020-01-22 18:06:48

如何清除画布重绘

推荐文章

最新文章

标签