我总是用这个

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

NOTE

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

这是2018年，仍然没有本地的方法来完全清除画布重新绘制。clearRect()不会完全清除画布。非填充型图纸不清除(例如。矩形())

1.要完全清除画布，无论你如何绘制:

context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();

优点:保留strokeStyle, fillStyle等;没有滞后;

缺点:如果你在绘制任何东西之前已经使用了beginPath，那就不必要了

2.使用宽度/高度hack:

context.canvas.width = context.canvas.width;

OR

context.canvas.height = context.canvas.height;

优点:与IE兼容 缺点:重置strokeStyle, fillStyle为黑色;延迟;

我想知道为什么本地解决方案不存在。实际上，clearRect()被认为是单行解决方案，因为大多数用户在绘制任何新路径之前都会执行beginPath()。虽然beginPath只在绘制线条时使用，而不是像rect()那样使用封闭路径。

这就是为什么接受的答案并没有解决我的问题，我最终浪费时间尝试不同的方法。诅咒你mozilla

一个快速的方法就是去做

canvas.width = canvas.width

我不知道它是如何工作的，但它确实如此!

最快的方式:

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

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

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

context.beginPath();

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