我不知道为什么这个画布是空的

I don't know why this canvas is null

本文关键字：为什么 我不知道      更新时间：2023-09-26

所以我一直在看几个如何用其他图像填充画布的例子，一旦我稍微重新排列代码，它们就会停止工作。 我注意到画布上的一些行为与其他类型的 javascript 变量相比没有意义，我想知道发生了什么。 例如，如果我做这样的事情...

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            var someVar = "This variable has been set";
            function aFunction(){
                alert(someVar);
            };
        </script>
    </head>
    <body onload="aFunction()">
        <canvas id="aCanvas" height="100" width="100"></canvas>
    </body>
</html>

。我得到一个弹出窗口，说"此变量已设置"，这是我所期望的，但是如果我做这样的事情......

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            var aCanvas = document.getElementById("aCanvas");
            var context;
            function aFunction(){
                try{
                    context = aCanvas.getContext("2d");
                    alert("it worked");
                }
                catch(err){
                    alert(err);
                }
            };
        </script>
    </head>
    <body onload="aFunction()">
        <canvas id="aCanvas" height="100" width="100"></canvas>
    </body>
</html>

。我收到一条警报，其中包含消息"类型错误：画布未定义"

然而，如果我尝试在尝试本身中以相同的方式定义画布......

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            var aCanvas;
            var context;
            function aFunction(){
                try{
                    aCanvas = document.getElementById("aCanvas");
                    context = aCanvas.getContext("2d");
                    alert("it worked");
                }
                catch(err){
                    alert(err);
                }
            };
        </script>
    </head>
    <body onload="aFunction()">
        <canvas id="aCanvas" height="100" width="100"></canvas>
    </body>
</html>

我收到消息"它有效"

因此，如果我想将全局变量初始化为字符串或简单的东西，我可以在函数中引用它。 如果我尝试将全局变量初始化为画布，我的函数会继续认为它是空的。 为什么？

在"onload"运行之前，当HTML首次被解析并运行脚本时，文档中没有元素。它尚未到达<body>标记，因此"文档"为空。这仍然是初始化仅限Javascript的变量以及其他一些事情的好时机，但实际上你的大部分起始代码应该发生在"onLoad"中。

简而言之：你的代码的成功很大程度上取决于你何时调用getElementById，而不是var aCanvas语句在哪里。希望对您有所帮助。

相关文章：