本文解析 clearRect() 无法清除画布的常见错误，指出问题根源在于参数误用（将数值当作对象属性访问），并提供正确写法、完整修复示例及关键注意事项。
本文解析 `clearrect()` 无法清除画布的常见错误，指出问题根源在于参数误用（将数值当作对象属性访问），并提供正确写法、完整修复示例及关键注意事项。
在使用 HTML5 Canvas 实现动态图形（如随滑块缩放的方块）时，clearRect() 是实现“重绘前清屏”的核心方法。但许多初学者会遇到“图形能变大却无法缩小”或“旧图形残留”的问题——这通常并非逻辑错误，而是 clearRect() 参数使用不当所致。
在你的代码中，关键问题出现在这一行：
ctx.clearRect(0, 0, howBig.width, howBig.length);
这里 howBig 是一个字符串类型的数值（例如 "25"），而你却试图访问 .width 和 .length 属性。howBig.length 实际返回的是字符串长度（如 "25".length === 2），而非画布尺寸；howBig.width 则为 undefined。因此 clearRect() 接收到的是无效尺寸（如 clearRect(0, 0, undefined, 2)），导致清除区域远小于实际绘制区域，旧方块残影无法被清除。
✅ 正确做法是：始终用 canvas 元素自身的 width 和 height 属性作为 clearRect() 的宽高参数，确保整个绘图区域被彻底清空：
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
function doRange() {
const canvas = document.getElementById("c1");
const sizeInput = document.getElementById("ranger");
const howBig = parseInt(sizeInput.value, 10); // 显式转为整数
const ctx = canvas.getContext("2d");
// ✅ 正确：清除整个画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制新方块（位置固定，尺寸随滑块变化）
ctx.fillStyle = "#F5BB00";
ctx.fillRect(10, 10, howBig, howBig);
}
⚠️ 重要注意事项：
- 不要依赖 CSS 设置的 canvas 尺寸：canvas.width/height 是绘图缓冲区尺寸（像素），而 canvas.style.width/height 仅控制显示缩放。若未显式设置 canvas.width/height，其默认值为 300×150，与样式尺寸不一致会导致模糊或比例异常。
-
推荐初始化画布尺寸：在 HTML 中或 JS 初始化时显式设置，例如：
<canvas id="c1" width="400" height="300"></canvas>
- clearRect() 是“擦除”，不是“删除”：它只是将指定矩形区域重置为透明黑色（即初始状态），后续 fillRect() 等绘制操作需在清除后执行，否则仍会叠加。
完整可运行示例（含初始化优化）：
// 页面加载后初始化画布尺寸（推荐）
window.addEventListener('load', () => {
const canvas = document.getElementById("c1");
canvas.width = 400; // 设置绘图缓冲区宽度
canvas.height = 300; // 设置绘图缓冲区高度
});
function doRange() {
const canvas = document.getElementById("c1");
const sizeInput = document.getElementById("ranger");
const howBig = Math.max(1, Math.min(100, parseInt(sizeInput.value, 10))); // 安全取值范围
const ctx = canvas.getContext("2d");
// 彻底清除整个画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制居中、尺寸可调的金色方块
const x = (canvas.width - howBig) / 2;
const y = (canvas.height - howBig) / 2;
ctx.fillStyle = "#F5BB00";
ctx.fillRect(x, y, howBig, howBig);
}
总结：clearRect() 的成败关键在于传入真实、有效的画布像素尺寸，而非输入值或任意计算结果。牢记 canvas.width 和 canvas.height 是你的黄金标准——它们定义了绘图坐标系的边界，也是清除操作的唯一可靠依据。
