Canvas无法绘制直线求助：首次使用Canvas绘图失败原因排查

核心问题1：脚本执行时机错误 #

你的JS脚本放在<head>标签里，浏览器解析到这里时，<body>里的canvas元素还没被加载，document.getElementById("chessBoard")会返回null，后续调用getContext直接失败，根本执行不到绘制直线的代码。

解决办法：
把脚本移到<body>标签的末尾，确保DOM元素加载完成后再执行JS：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Chess Project</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <section>
            <header id="header">
                Chess Project
            </header>
        </section>
        <section>
            <canvas id="chessBoard"></canvas>
        </section>
        <!-- 移到body末尾 -->
        <script src="board.js"></script>
    </body>
</html>

或者在JS里用DOMContentLoaded事件包裹代码，确保DOM加载完成后执行：

document.addEventListener('DOMContentLoaded', function() {
    const c = document.getElementById("chessBoard");
    const canvas = c.getContext("2d");

    canvas.beginPath();
    canvas.moveTo(75, 0);
    canvas.lineTo(75, 600);
    canvas.stroke();
});

核心问题2：Canvas原生尺寸未设置 #

你只通过CSS给canvas设置了宽高，但canvas的原生绘图尺寸（即width和height属性）没设置，默认是300x150。CSS的宽高是把这个300x150的画布拉伸到600x600显示，导致你绘制的坐标被缩放，直线可能超出显示区域或者变形。

解决办法：
给canvas标签添加width和height属性，值和CSS的宽高一致：

<canvas id="chessBoard" width="600" height="600"></canvas>

修改后的效果 #

做完以上两处修改后，代码就能正常绘制出从(75,0)到(75,600)的垂直直线了。

内容的提问来源于stack exchange，提问作者aidanbh16