清空HTML5 Canvas画布有五种可靠方法：一、clearRect()覆盖指定区域；二、重置width/height属性重建缓冲区；三、fillRect()配合透明色填充；四、save()/restore()保存并恢复绘图状态；五、创建新canvas元素替换旧实例。
如果您在使用HTML5 Canvas绘制图形后需要清空画布内容，则可能是由于绘图状态残留或像素数据未重置导致显示异常。以下是几种可靠且互不依赖的清空画布方法：
一、使用clearRect()方法清除指定矩形区域
该方法通过绘制一个完全透明的矩形覆盖画布指定区域，从而实现视觉上的清空效果；它不改变画布尺寸，仅清除像素数据。
1、获取Canvas元素的2D渲染上下文对象，例如：const ctx = canvas.getContext('2d');
2、调用clearRect()并传入从左上角(0, 0)开始、覆盖整个画布的宽高参数：ctx.clearRect(0, 0, canvas.width, canvas.height);
立即学习“前端免费学习笔记（深入）”；
二、重置canvas元素的width属性触发自动清空
修改canvas元素的width或height属性会强制浏览器重建位图缓冲区，原有所有绘图内容将被丢弃，这是最彻底的重置方式。
1、保存当前画布原始宽度值（如需后续恢复）：const originalWidth = canvas.width;
2、对width属性赋值为当前值：canvas.width = canvas.width;
三、使用fillRect()配合透明色填充整个画布
该方法利用fillStyle设置全透明黑色（rgba(0,0,0,0)）后填充整个画布，适用于需保留当前绘图状态但清除可见内容的场景。
1、设置填充样式为完全透明：ctx.fillStyle = 'rgba(0, 0, 0, 0)';
2、调用fillRect()覆盖全部区域：ctx.fillRect(0, 0, canvas.width, canvas.height);
四、保存与恢复绘图状态结合清空操作
当需在清空前保留当前变换、裁剪路径等状态，并在清空后还原时，可借助save()和restore()机制配合clearRect()使用。
1、在绘图操作前调用保存状态：ctx.save();
2、执行清空操作：ctx.clearRect(0, 0, canvas.width, canvas.height);
3、按需调用恢复状态：ctx.restore();
五、创建新canvas元素替换旧实例
此方法适用于需完全隔离前后绘图环境、避免任何上下文残留影响的严格场景，新canvas拥有独立的渲染上下文和初始状态。
1、创建新的canvas元素：const newCanvas = document.createElement('canvas');
2、复制原canvas的宽高属性：newCanvas.width = canvas.width; newCanvas.height = canvas.height;
3、用新canvas替换DOM中旧节点：canvas.parentNode.replaceChild(newCanvas, canvas);
