Canvas 清空后旧图形仍残留，通常并非“记忆”了函数，而是因路径未重置、坐标系平移未恢复或 beginPath() 缺失导致绘图状态污染；本文将系统解析根本原因并提供可复用的清屏与重绘标准流程。
canvas 清空后旧图形仍残留，通常并非“记忆”了函数，而是因路径未重置、坐标系平移未恢复或 `beginpath()` 缺失导致绘图状态污染；本文将系统解析根本原因并提供可复用的清屏与重绘标准流程。
在 Canvas 绘图中，clearRect() 仅清除像素，并不重置绘图状态（如当前路径、变换矩阵、样式设置等）。你遇到的“drawNet() 再次调用后旧图形复现”，核心问题在于：
- ctx.translate() 累积副作用：原始代码在初始化时执行 ctx.translate(centerX, centerY)，后续 clearReact() 中虽尝试反向平移 ctx.translate(-centerX, -centerY)，但若该函数未被调用，或多次调用后平移嵌套失衡，会导致所有绘图坐标严重偏移，看似“残留”，实为错位绘制；
- 路径未显式重置（beginPath() 缺失）：drawNet() 中循环内反复调用 stroke() 而未在每次绘制前调用 ctx.beginPath()，使 Canvas 将所有网格线累积为一个超长路径。一旦 stroke() 执行，该路径持续存在于当前上下文——即使 clearRect() 清屏，下次 stroke() 若未 beginPath()，仍会重绘整个历史路径；
- 全局变量污染与状态残留：counter、tempX/tempY 等未初始化即使用，stos 和 arrayFunction 在 createNewGraphFunction() 后虽被清空，但绘图函数 drawFunctionGraph() 内部依赖的 counter 和 tempX/tempY 无默认值，易引发 NaN 或意外连线。
✅ 正确做法是：清屏 = 清像素 + 重置状态 + 重建基准。推荐采用以下结构化流程：
function clearAndRedraw() {
// ✅ 1. 清除全部像素（必须指定完整宽高）
ctx.clearRect(0, 0, canvas.width, canvas.height);
// ✅ 2. 重置所有可能影响绘图的状态
ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置变换矩阵（替代多次 translate）
ctx.strokeStyle = 'black'; // 重置基础样式（按需补充 fillStyle、lineWidth 等）
ctx.lineWidth = 1;
// ✅ 3. 重建坐标系基准（无需 translate，直接用逻辑坐标计算）
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
// ✅ 4. 重新绘制底层元素（确保每个绘制块都以 beginPath 开始）
drawNet(centerX, centerY);
drawNumericalInterval(centerX, centerY);
drawAxes(centerX, centerY);
}
function drawNet(centerX, centerY) {
ctx.beginPath(); // ⚠️ 关键！每次独立绘制前必须 beginPath
const rangex = canvas.width / 40;
const rangey = canvas.height / 20;
// 垂直网格线（基于 canvas 坐标系，无需 translate）
for (let x = 0; x = 0 && x = 0 && y <p>? <strong>关键注意事项</strong>：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5961" title="Markdown Canvas"><img
src="https://img.php.cn/upload/skill/000/000/081/179074273835215.jpg" alt="Markdown Canvas" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5961" title="Markdown Canvas" class="overflowclass">Markdown Canvas</a>
<p class="overflowclass">将Markdown文件转换为美观的HTML页面，适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5961" title="Markdown Canvas" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 永远不要依赖 translate() 构建坐标系：它易出错且难以追踪。推荐在绘图函数内部直接计算 (centerX + x * scale) 类坐标；
- 每个独立图形必须包裹在 beginPath() → ... → stroke()/fill() 中：避免路径累积；
- 清屏后必须重置 transform：ctx.setTransform(1,0,0,1,0,0) 是最安全的重置方式，比手动反向 translate 更可靠；
- 函数绘图需校验数值有效性：isFinite() 和边界检查可防止 NaN 导致整条线消失或错乱；
- 避免全局变量隐式状态：counter、tempX 等应在函数内声明初始化，而非依赖外部作用域。
遵循以上模式，即可彻底解决“清屏后旧图复现”的假象，实现稳定、可预测的 Canvas 图形更新。
