Question

所以我一直在看几个如何用其他图像填充画布的例子，一旦我重新排列代码，他们就会停止工作。我注意到与其他类型的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>

...我收到一条消息“TypeError：aCanvas is undefined”

然而，如果我尝试在try中自己定义画布...

<!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>

我收到消息“它工作了”

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

Answer 1

在'onload'运行之前，当首次解析HTML并运行脚本时，文档中没有元素。它尚未达到<body＆gt;标签，所以“文件”是空的。这仍然是初始化仅Javascript变量以及其他一些事情的适当时机，但实际上很大一部分起始代码应该出现在'onLoad'中。

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

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

1 个答案: