如何正确使用 Canvas 绘制线条

作者：袖梨 2026-08-08

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 线条的最小可靠流程是：