如何在HTML的head标签中编写Canvas脚本？附圆弧绘制代码咨询

我来帮你解决这个问题，先梳理下你原代码里的关键问题，再给出修正后的完整方案：

你原代码的核心问题 #

• DOM加载顺序问题：在<head>的全局脚本里直接调用document.getElementById("myCanvas")时，浏览器还没解析到<body>里的canvas元素，这时候拿到的是null，后续调用getContext()肯定会抛出错误。
• 元素ID不匹配：你代码里的canvas元素id写漏了（myCanv...），必须保证脚本里的ID和HTML中的canvas元素ID完全一致，否则也获取不到元素。

修正后的完整代码 #

把获取canvas元素和上下文的逻辑移到页面DOM解析完成的回调函数里，确保元素已经存在：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Canvas Experiments</title>
    <script>
        function drawCircle() {
            // 等到DOM加载完成后再获取canvas元素
            const canvas = document.getElementById("myCanvas");
            const ctx = canvas.getContext("2d");
            
            // 绘制1.5×π的圆弧（从0度到270度）
            ctx.beginPath();
            ctx.arc(100, 75, 50, 0, 1.5 * Math.PI);
            ctx.stroke();
        }

        // 监听DOM解析完成事件（比load事件更高效，无需等待图片等资源）
        document.addEventListener("DOMContentLoaded", drawCircle);
    </script>
</head>
<body>
    <!-- 确保ID与脚本中的完全一致，同时设置canvas宽高和边框方便观察 -->
    <canvas id="myCanvas" width="200" height="150" style="border: 1px solid #eee;"></canvas>
</body>
</html>

关键知识点说明 #

1. DOMContentLoaded vs load：用DOMContentLoaded事件比window.load更合适，它在浏览器解析完所有DOM元素后就触发，不需要等待图片、样式表等外部资源加载完成，执行时机更早。
2. 变量作用域：把canvas和上下文的定义放在回调函数内部，避免全局变量污染，同时确保只有在DOM就绪时才获取元素。
3. canvas基础设置：给canvas设置width和height属性（不要只用CSS设置，否则会拉伸图形），加上边框能让你更直观看到canvas的范围。

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