Canvas 无法绘制线条通常是因为 JavaScript 在 DOM 元素尚未加载完成时就执行了绘图逻辑，或缺少必要的绘图流程步骤（如未调用 closePath() 或更关键的是——脚本过早运行）。本文详解根本原因及标准解决方案。

canvas 无法绘制线条通常是因为 javascript 在 dom 元素尚未加载完成时就执行了绘图逻辑，或缺少必要的绘图流程步骤（如未调用 `closepath()` 或更关键的是——脚本过早运行）。本文详解根本原因及标准解决方案。

在你的代码中，document.getElementById("chessBoard") 返回 null 的根本原因并非 closePath() 缺失（该方法仅用于闭合路径，对单条线段非必需），而是 脚本在 元素被浏览器解析前就已执行。观察你的 HTML 结构：

  <script src="board.js"></script><!-- ❌ 脚本在 <body> 之前加载 --><section><canvas id="chessBoard"></canvas></section>

由于 <script> 标签位于 <head> 中且未加 defer 或 async，浏览器会<strong>同步加载并立即执行 board.js，此时 <body> 内容（包括 <canvas>）尚未被解析，getElementById 必然返回 null，后续所有 Canvas 操作（getContext、moveTo 等）均因 c 为 null 而静默失败。</script>

Markdown Canvas

将Markdown文件转换为美观的HTML页面，适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。

下载

✅ 正确做法是确保 DOM 就绪后再执行绘图逻辑。推荐以下任一方案：

方案 1：将脚本移至