本文详解 canvas 中 clearrect 的正确用法：必须传入画布的实际宽高（canvas.width/canvas.height），而非滑块值或未定义属性，否则无法彻底清除旧图形，导致矩形“只增大不缩小”的视觉残留问题。
本文详解 canvas 中 clearrect 的正确用法：必须传入画布的实际宽高（canvas.width/canvas.height），而非滑块值或未定义属性，否则无法彻底清除旧图形，导致矩形“只增大不缩小”的视觉残留问题。
在使用 <input type="range"> 动态控制 Canvas 上矩形尺寸时，一个常见误区是误将 clearRect 的宽高参数设为滑块值（如 howBig.width 或 howBig.length）。这会导致清除区域远小于实际画布尺寸，旧绘制内容未被完全擦除，从而出现“矩形能变大但无法变小”的假象。
根本原因在于：clearRect(x, y, width, height) 的后两个参数表示要清除的矩形区域的宽和高，而非目标绘图区域的尺寸。若传入 howBig.width（howBig 是字符串数字，无 .width 属性，结果为 undefined），Canvas 会将其强制转为 0，即 clearRect(0, 0, 0, 0) —— 实际上什么也没清！
✅ 正确做法是始终清除整个画布渲染区域：
function doRange() {
const canvas = document.getElementById("c1");
const sizeInput = document.getElementById("ranger");
const howBig = parseInt(sizeInput.value); // 转为数字，避免字符串拼接问题
const ctx = canvas.getContext("2d");
// ✅ 关键修复：清除整个画布，使用 canvas.width 和 canvas.height
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#F5BB00";
ctx.fillRect(10, 10, howBig, howBig);
}⚠️ 注意事项：
- canvas.width 和 canvas.height 是 Canvas 元素的渲染分辨率（像素），与 CSS 设置的显示尺寸无关。若通过 CSS 缩放画布，请确保 width/height 属性已显式设置（如 <canvas id="c1" width="500" height="300">），否则默认为 300×150，清除范围可能不匹配；
- 每次重绘前必须调用 clearRect，且应置于 fillRect 等绘制操作之前；
- 使用 parseInt() 或 Number() 显式转换 value，避免 "10" + "5" 导致意外字符串拼接；
- 若需保留背景色，可在 clearRect 后调用 ctx.fillStyle + ctx.fillRect(0, 0, canvas.width, canvas.height) 填充底色。
总结：clearRect 的核心职责是“擦除指定区域”，而非“重置画布状态”。要实现干净的逐帧重绘，务必传入准确、完整的清除范围 —— 即画布自身的 width 和 height 属性值。
