Canvas无法绘制直线，通常是因为JavaScript在DOM元素加载完成前就执行了绘图代码，导致获取不到canvas元素或其2D上下文；closePath()并非必需，真正的问题在于脚本执行时机过早。

canvas无法绘制直线，通常是因为javascript在dom元素加载完成前就执行了绘图代码，导致获取不到canvas元素或其2d上下文；`closepath()`并非必需，真正的问题在于脚本执行时机过早。

在你的代码中，<script src="board.js"></script> 被置于

内，而 出现在 底部。这意味着当 board.js 执行时，HTML 解析尚未到达 标签，document.getElementById("chessBoard") 返回 null，后续调用 getContext("2d") 会抛出 TypeError（控制台可见），导致绘图逻辑完全中断——这不是 closePath() 缺失所致，而是 DOM 访问失败的根本错误。

✅ 正确做法是确保脚本在 DOM 加载完成后执行。推荐以下任一方式：

方案一：将 script 移至 body 底部（最简实践）

Markdown Canvas

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

下载

<body>
  <section>...</section>
  <section>
    <canvas id="chessBoard"></canvas>
  </section>
  <!-- 放在 </body> 前 -->
  <script src="board.js"></script>
</body>

方案二：使用 DOMContentLoaded 事件（推荐，语义清晰）

// board.js
document.addEventListener('DOMContentLoaded', () => {
  const canvas = document.getElementById("chessBoard");
  if (!canvas) {
    console.error("Canvas element with id 'chessBoard' not found.");
    return;
  }

  const ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(75, 0);
  ctx.lineTo(75, 600);
  ctx.stroke(); // ✅ stroke() 已足够绘制线段；closePath() 仅用于闭合路径（如三角形、矩形），对单一线段无意义
});

⚠️ 注意事项：

• closePath() 不是绘制直线的必要步骤，它仅将当前子路径的终点连接回起点，适用于需要闭合形状的场景（例如 moveTo→lineTo→lineTo→closePath 绘制三角形）。
• 始终检查 getElementById 返回值是否为 null，避免静默失败。
• 若使用 width/height CSS 属性设置 canvas 尺寸，请注意：这会拉伸 canvas 像素而非改变绘图坐标系；应直接设置 canvas 元素的 width 和 height HTML 属性（如 ）以保证清晰渲染。

总结：Canvas 绘图失效的首要排查点是 执行时机与 DOM 就绪状态，而非绘图 API 的误用。养成监听 DOMContentLoaded 或延迟脚本加载的习惯，可规避绝大多数“画不出”的问题。