Context.clearRect(starting width, starting height, ending width, ending height);

例如:上下文。clearRect(0,0, canvas.)宽度,canvas.height);

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

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

如果你只使用clearRect，如果你在一个表单中提交你的图纸，你会得到一个提交而不是清除，或者可能它可以先清除，然后上传一个无效的图纸，所以你需要在函数的开头添加一个preventDefault:

   function clearCanvas(canvas,ctx) {
        event.preventDefault();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }


<input type="button" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">

希望它能帮助到别人。

我总是用这个

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

NOTE

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

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

context.beginPath();

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