我总是用

ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);

对于自定义颜色，和

ctx.clearRect(0, 0, canvas.width, canvas.height);

用于使画布透明时清除

在webkit中，您需要将宽度设置为不同的值，然后您可以将其设置回初始值

我总是用这个

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

NOTE

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

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

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

现在有一个.reset()方法，它不仅会清除画布缓冲区，还会完全重置上下文的所有属性(样式等)，重置它的转换矩阵，清除它的当前子路径，清除它的状态堆栈(由save()和restore()控制)，并删除所有的剪辑区域。

context.reset();
// now 'context' is clear as new

基本上，它具有与canvas相同的效果。Width += 0，除了它更习惯。

然而，在当前的Chromium实现中，它似乎和canvas一样慢。Width += 0时，它也会生成一个新的缓冲区，而不是简单地清除前一个缓冲区(导致更多的内存垃圾)。另一个警告是，它目前只在铬浏览器中支持。 虽然要填充它，你可以去Chrome的方式

if (!CanvasRenderingContext2D.prototype.reset) {
  CanvasRenderingContext2D.prototype.reset = function() {
    this.canvas.width += 0;
  };
}
if (!OffscreenCanvasRenderingContext2D.prototype.reset) {
  OffscreenCanvasRenderingContext2D.prototype.reset = function() {
    this.canvas.width += 0;
  };
}