Canvas 无法绘制线条的常见原因是 JavaScript 在 DOM 元素加载完成前执行绘图逻辑，导致获取不到 canvas 元素或其 2D 上下文；此外，closePath() 并非绘制直线所必需，真正关键的是确保脚本在 DOM 就绪后运行。
canvas 无法绘制线条的常见原因是 javascript 在 dom 元素加载完成前执行绘图逻辑，导致获取不到 canvas 元素或其 2d 上下文；此外，`closepath()` 并非绘制直线所必需，真正关键的是确保脚本在 dom 就绪后运行。
你提供的代码逻辑本身是正确的（beginPath() → moveTo() → lineTo() → stroke()），但问题根源在于 脚本执行时机过早：当前 HTML 中 <script src="board.js"></script> 被放在 <head> 内，而此时 <canvas id="chessBoard"> 尚未被浏览器解析，document.getElementById("chessBoard") 返回 null，后续调用 getContext("2d") 会报错（如 Cannot read property 'getContext' of null），导致整段绘图代码静默失败。
✅ 正确做法是确保 DOM 完全加载后再执行 canvas 操作。推荐以下任一方案：
方案 1：将 script 移至 body 底部（最简实践）
<body>
<section>
<header id="header">Chess Project</header>
</section>
<section>
<canvas id="chessBoard"></canvas>
</section>
<!-- ✅ 放在 </body> 前，确保 DOM 已就绪 -->
<script src="board.js"></script>
</body>方案 2：使用 DOMContentLoaded 事件（推荐，更健壮）
在 board.js 中修改为：
document.addEventListener('DOMContentLoaded', () => {
const c = document.getElementById("chessBoard");
if (!c) {
console.error("Canvas element with id 'chessBoard' not found.");
return;
}
const canvas = c.getContext("2d");
if (!canvas) {
console.error("Failed to get 2D context.");
return;
}
canvas.beginPath();
canvas.moveTo(75, 0);
canvas.lineTo(75, 600);
canvas.stroke(); // ✅ stroke() 即可完成绘制；closePath() 仅在需要闭合路径（如三角形、矩形）时调用，对单一线段无意义
});⚠️ 注意事项：
- closePath() 的作用是自动绘制一条从当前点回到起点的直线，用于闭合形状（如 moveTo(0,0) → lineTo(100,0) → lineTo(100,100) → closePath() 形成直角三角形）。对单一线段调用 closePath() 不仅多余，还可能因起点/终点重合产生不可见像素。
- 确保 CSS 中 canvas 的 width/height 属性设置的是 元素尺寸，而非绘图表面分辨率。若需高清渲染，应显式设置 canvas 的 width 和 height 属性（HTML 属性或 JS 设置），而非仅靠 CSS 缩放。例如：
<canvas id="chessBoard" width="600" height="600"></canvas>
否则 CSS 缩放会导致线条模糊。
✅ 总结：绘制 Canvas 线条的最小可靠流程是：
- 等待 DOM 加载完成（DOMContentLoaded 或脚本置于 </body> 前）；
- 获取 canvas 元素并验证存在；
- 获取 2D 上下文；
- 调用 beginPath()、moveTo()、lineTo()、stroke()；
- （可选）添加错误处理与调试日志。
遵循以上步骤，你的棋盘垂直分界线即可清晰呈现。
