HTML网页中利用canvas标签清除画布的方法-html教程-PHP中文网

clearrect() 参数必须用 canvas.width 和 canvas.height 而非 style.width，且清除前需重置 transform 和 clip 状态，否则清除区域错位或无效；清除非矩形区域应使用 clip 或 destination-out 模式。

html网页中利用canvas标签清除画布的方法

clearRect() 参数必须用 canvas.width 而不是 style.width

清除失效最常见的原因是把 CSS 缩放尺寸当成了绘图尺寸。canvas.style.width 可能是 400px，但 canvas.width 默认仍是 300——clearRect(0, 0, canvas.style.width, canvas.style.height) 会传入字符串或 undefined，导致清除区域错位或为空。

正确做法只认 canvas 元素自身的 width 和 height 属性：

初始化时显式设置：<canvas width="800" height="600"></canvas>
JS 中始终用 canvas.width 和 canvas.height 作为 clearRect() 的后两个参数
若需响应式，用 JS 动态同步：canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;（注意：这会重置状态）

清空前不重置 transform 或 clip 会导致清除偏移

如果你调过 ctx.translate(100, 50) 或 ctx.clip()，再执行 clearRect(0, 0, canvas.width, canvas.height)，清除区域会跟着被平移或裁剪——看起来像“清不干净”。

安全做法是在 clearRect() 前主动恢复上下文状态：

Markdown Canvas

将Markdown文件转换为美观的HTML页面，适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。

下载

重置变换：ctx.setTransform(1, 0, 0, 1, 0, 0)
清除裁剪：ctx.restore()（前提是之前 save() 过），或现代浏览器可用 ctx.resetClip()
更稳妥的顺序：ctx.setTransform(...); ctx.clearRect(...);，再开始新绘制

重设 canvas.width 是清空，但会丢掉所有绘图状态

canvas.width = canvas.width 确实能清空，但它会重建整个位图缓冲区，连带重置 fillStyle、strokeStyle、font、lineWidth、当前 transform 等全部状态。

除非你明确需要“硬重启”，否则不推荐：

高频绘制中反复重设宽高，性能比 clearRect() 差一个数量级
后续绘制必须重新设置所有样式，容易漏配导致颜色/粗细异常
如果只清局部区域，这种做法完全偏离目标

清除非矩形区域要用 clip 或 destination-out

clearRect() 只能清矩形。要擦除圆形、多边形或手绘路径区域，得借助其他机制：

用 clip() 配合全量 clearRect()：ctx.save(); ctx.beginPath(); ctx.arc(x,y,r,0,PI*2); ctx.clip(); ctx.clearRect(0,0,canvas.width,canvas.height); ctx.restore();
用 globalCompositeOperation = "destination-out" 绘制透明形状，直接“挖掉”像素（注意：它会影响后续绘制，记得切回 "source-over"）
避免用 fillRect() 填 "rgba(0,0,0,0)" 模拟清除——它本质是绘制，不是擦除，叠加多次可能有渲染偏差