本文详解 canvas 中 clearrect 的正确用法，指出常见误区（如误用变量尺寸清屏），并提供可随 range 滑块实时缩放、无残留绘制的完整解决方案。
本文详解 canvas 中 clearrect 的正确用法，指出常见误区（如误用变量尺寸清屏），并提供可随 range 滑块实时缩放、无残留绘制的完整解决方案。
在使用 控制 Canvas 上矩形大小时，一个典型误区是：仅清除“当前绘制区域”，而非整个画布有效绘图区。你原代码中 ctx.clearRect(0, 0, howBig.width, howBig.length) 存在两个关键错误：
- howBig 是一个字符串类型的数值（如 "25"），它没有 .width 或 .length 属性（.length 是字符串属性，但此处语义错误；.width 根本不存在）；
- 即使属性存在，clearRect 的宽高参数也应覆盖整个画布渲染区域，否则旧图形残留将导致视觉“叠加假象”——看似矩形没变小，实则是前一次大尺寸绘制未被清除。
✅ 正确做法是：每次重绘前，用 ctx.clearRect(0, 0, canvas.width, canvas.height) 彻底清空整个 Canvas 像素缓冲区。
以下是修正后的 doRange() 函数（含健壮性增强）：
function doRange() {
const canvas = document.getElementById("c1");
const sizeInput = document.getElementById("ranger");
const howBig = parseInt(sizeInput.value, 10); // 确保转为整数
const ctx = canvas.getContext("2d");
// ✅ 关键修复：清除整个画布（使用 canvas.width/height，非动态值）
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 设置填充色并绘制正方形（左上角固定于 (10, 10)）
ctx.fillStyle = "#F5BB00";
ctx.fillRect(10, 10, howBig, howBig);
}
⚠️ 注意事项：
- Canvas 尺寸需显式设置：HTML 中
- oninput 事件比 onchange 更及时，适合滑块拖拽过程中的连续响应，你已正确使用，值得肯定。
- 所有 ctx 绘图操作前务必先 clearRect，这是 Canvas “状态机”模型的基本原则——它不会自动擦除历史帧。
总结：clearRect 不是“擦除某物”，而是“将指定矩形区域设为透明黑色”。要实现干净的动态更新，必须清除整个逻辑绘图区（即 canvas.width × canvas.height），再重新绘制当前状态。掌握这一点，就能轻松构建交互式图表、动画和实时 UI 反馈。
