如果你只使用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);">

希望它能帮助到别人。

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

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

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

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

我总是用

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

对于自定义颜色，和

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

用于使画布透明时清除

如果你只使用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);">

希望它能帮助到别人。

这里有很多很好的答案。 还有一点需要注意的是，有时候只清除部分画布也很有趣。 也就是说，“淡出”之前的图像，而不是完全擦除它。 这样可以产生很好的轨迹效果。

很容易。假设你的背景颜色是白色:

// assuming background color = white and "eraseAlpha" is a value from 0 to 1.
myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")";
myContext.fillRect(0, 0, w, h);