使用 document.getElementById() 时出现空错误

Question

我正在尝试使用 javascript 使用 canvas 标签绘制一个圆圈，但在使用 document.getElementById() 时我不断收到错误提示 c is null。我最初认为这是因为 HTML 内容加载速度不够快，所以我使用了 window.onload 但这并没有改变任何东西。任何帮助将不胜感激：

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="" />
        <link rel="stylesheet" href="css/stylesheet.css" />
        <link rel="icon" href="images/favicon.png" />

        <script src="javascript/script.js"></script>
    </head>
    
    <body>

        <canvas id="myLogo" width="150" height="150"></canvas>
        
    </body>
</html>

Javascript:

window.onload = scripting();

function scripting() {

    logo();

    function logo() {

        console.log('called logo()');
        
        var c = document.getElementById("myLogo");
        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.arc(100, 75, 50, 0, 2 * Math.PI);
        ctx.stroke(); 
    }
}

以上代码导致以下错误，引用行 12:13:

Answer 1

您是否尝试过将 <script> 块移动到 <body>（中的最后一项）的底部？

使用 document.getElementById() 时出现空错误

null error when using document.getElementById()

javascript

html

html5-canvas