getElementById为Canvas元素返回null

Question

当我运行下面的代码时，我得到变量曲面的'null'。 谁能告诉我我做错了什么？

<html>

<body>
    <script>
        var surface = document.getElementById("myCanvas");
        console.log("surface: " + surface);
    </script>

    <canvas id="myCanvas" width="300" height="150">
        <p>Your browser doesn't support canvas.</p>
    </canvas>
</body>

</html>

Answer 1

当您尝试获取该元素时，该元素尚不存在，移动脚本标记以使元素位于DOM之前

<html>

<body>
    <canvas id="myCanvas" width="300" height="150">
        <p>Your browser doesn't support canvas.</p>
    </canvas>

    <script>
        var surface = document.getElementById("myCanvas");
        console.log("surface: " + surface);
    </script>
</body>

</html>

Answer 2

将您的javascript放在画布之后，它很可能在画布呈现在页面上之前运行。