无法获取Canvas：代码第11行报错原因排查求助

核心错误原因 #

1. 第11行报错（if (canvas.getContext)） #

你在还没获取canvas元素的情况下就调用了canvas.getContext，此时canvas是undefined，直接触发"Unable to get canvas"错误。代码里先写了这个判断，之后才用document.getElementById('canvas')获取元素，顺序完全颠倒。

2. 其他致命语法/结构错误 #

• canvas标签的id属性未闭合：<canvas id="canvas> 需修正为 <canvas id="canvas"></canvas>
• HTML结构违规：<h1>标签放在了<body>外面，必须移到<body>内部
• 代码最开头多余的if (canvas.getContext) {...片段无意义，直接删除

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>Peripheral vision checker</title>
    <script type="application/javascript">
        function draw() {
            // 先获取canvas元素，再判断是否支持绘图API
            const canvas = document.getElementById('canvas');
            if (canvas && canvas.getContext) {
                const ctx = canvas.getContext('2d');

                function getRandomInt(max) {
                    return Math.floor(Math.random() * max);
                }
                // 替换为实际窗口尺寸，避免固定值超出画布范围
                var x = window.innerHeight;
                var y = window.innerWidth;
                // 先开启新路径再绘制，避免填充历史路径
                ctx.beginPath();
                ctx.arc(getRandomInt(x), getRandomInt(y), 10, 0, 2 * Math.PI);
                ctx.fill();

                console.log(getRandomInt(x) + " " + getRandomInt(y));
            }
        }
    </script>
</head>
<body onload="draw();">
    <h1>Peripheral vision checker</h1>
    <canvas id="canvas"></canvas>
</body>
</html>

额外优化建议 #

• 给canvas设置宽高：可以在标签里添加width="1000" height="800"，或者用JS动态设置为窗口大小，避免默认尺寸过小导致圆点不可见
• 如需多次生成随机圆点，可将绘制逻辑封装为单独函数，配合定时器循环调用

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