Canvas 清空后旧图形仍残留，根本原因并非“内存记忆”，而是 clearRect() 仅清除像素，不重置绘图状态（如当前路径、变换矩阵）；ctx.translate() 累积导致坐标偏移，且多处缺失 beginPath() 导致路径意外连接。
canvas 清空后旧图形仍残留，根本原因并非“内存记忆”，而是 `clearrect()` 仅清除像素，不重置绘图状态（如当前路径、变换矩阵）；`ctx.translate()` 累积导致坐标偏移，且多处缺失 `beginpath()` 导致路径意外连接。
在 Canvas 绘图中，clearRect() 只负责擦除指定区域的像素，它不会重置绘图上下文的状态——包括当前路径（current path）、变换矩阵（transform matrix）、线条样式、填充色等。你遇到的“旧函数仍被绘制”现象，实则是以下三个核心问题共同作用的结果：
? 1. ctx.translate() 未正确配对与重置
原始代码中：
ctx.translate(centerX, centerY); // 初始平移
// … 后续多次调用 clearReact()
function clearReact() {
ctx.translate(-centerX, -centerY); // 尝试还原
ctx.clearRect(0, 0, canvas.width, canvas.height);
// … 重绘后再次调用 ctx.translate(centerX, centerY)
}
问题在于：每次 drawAxes() 或 drawFunctionGraph() 执行时，若未显式重置坐标系，translate() 会持续叠加。例如连续调用两次 clearReact()，就会执行两次 translate(-centerX, -centerY) 和两次 translate(centerX, centerY)，最终导致坐标系严重偏移，新图形被绘制在不可见区域，误以为“旧图残留”。
✅ 正确做法：避免全局坐标系变更，改用相对坐标计算。所有绘图逻辑（轴线、网格、函数曲线）均基于原始 (0, 0) 原点计算，通过数学换算将逻辑坐标映射到画布像素。这样无需 translate()，彻底规避累积误差。
? 2. 缺失 beginPath() 导致路径意外连接
Canvas 的路径是累积的。若在 drawNet() 中未调用 beginPath()，后续所有 moveTo()/lineTo() 都会追加到上一个未闭合的路径中。当 drawFunctionGraph() 绘制曲线时，其 ctx.lineTo(x, y) 可能意外连接到网格线末端，形成视觉上的“旧图残留”。
修复示例（drawNet 关键修正）：
function drawNet() {
ctx.beginPath(); // ✅ 必须开启新路径
for (let i = 0; i <blockquote><p>⚠️ 注意：stroke() 应放在循环外，否则每条线单独渲染，性能极差；beginPath() 必须在路径构建前调用。</p></blockquote><h3>? 3. clearRect() 后未重建完整场景</h3><p>clearRect() 仅清空像素，但你的 clearReact() 在清空后直接重绘网格、刻度、坐标轴——这本身正确。但原始代码中 drawFunctionGraph() 依赖全局变量 tempX/tempY 且未初始化，首次绘制前若未定义，会导致 moveTo(NaN, NaN)，引发不可预测行为。同时，counter、i 等变量未声明为 let，存在全局污染风险。</p><p>✅ 安全清理与重绘模板：</p><pre class="brush:php;toolbar:false;">function clearReact() {
// 1. 彻底清空画布（覆盖全尺寸）
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 2. 重置所有依赖状态
number = -20;
// 3. 按顺序重建基础图层（无 translate 干扰）
drawNet();
drawNumericalInterval();
drawAxes();
}✅ 最佳实践总结
| 问题类型 | 错误写法 | 推荐方案 |
|---|---|---|
| 坐标系管理 | 频繁 translate()/restore() | ✅ 全部使用绝对坐标计算，禁用 translate() |
| 路径管理 | 循环内 stroke() + 缺失 beginPath() | ✅ beginPath() → 构建路径 → stroke() 单次执行 |
| 状态隔离 | 全局变量 tempX, counter | ✅ 函数内 let tempX, tempY, counter = 0 局部声明 |
| 清空逻辑 | clearRect() 后遗漏重绘 | ✅ 清空 → 重置变量 → 顺序重绘基础图层 |
最后，务必为交互按钮绑定清理逻辑：
<button onclick="clearReact()">清空并重绘</button> <button onclick="createNewGraphFunction()">绘制新函数</button>
遵循以上原则，Canvas 将严格按指令绘制——清空即彻底清空，重绘即全新呈现，再无“幽灵图形”干扰。
