1

所以我一直在看几个例子，说明如何用其他图像填充画布，只要我稍微重新排列代码，它们就会停止工作。我注意到画布上的一些行为与其他类型的 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 未定义”的警报

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

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

我收到消息“它有效”

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

4

1 回答 1

6

在“onload”运行之前，当 HTML 第一次被解析并运行你的脚本时，文档中没有元素。它还没有到达<body> 标签，所以“文档”是空的。这仍然是初始化 Javascript-only 变量和其他一些东西的好时机，但实际上你的大部分起始代码应该出现在“onLoad”中。

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

于 2013-11-05T18:27:25.250 回答