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

问题描述：

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

So I've been looking at a couple of examples of how to fill a canvas with some other image, and as soon as I rearrange the code slightly they stop working. I'm noticing some behavior on canvases that doesn't make sense compared to other types of javascript variables, and I'd like to know what's going on. for instance, if I do something like this...

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

...我得到一个弹出窗口说这个变量已经设置，这是什么我会期望，但如果我做这样的事情...

...I get a pop-up saying "This variable has been set", which is what I would expect, but if I do something like this...

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

...I get an alert with the message "TypeError: aCanvas is undefined"

但是，如果我尝试在try本身中以同样的方式定义画布...

And yet, if I try to define the canvas the same way within the try itself...

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

我收到it work的消息

I get the message "it worked"

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

So if I want to initialze a global variable as a string or something simple, I can then reference it in functions. If I try to initialize a global variable as a canvas, my functions go on to think that it is null. Why is that?

答

在'onload'运行之前，当HTML首先被解析并运行你的脚本，文档中没有元素。它还没有到达< body >标签，因此document为空。这仍然是一个时机来初始化Javascript-only变量和可能的其他一些事情，但真正的大部分你的起始代码应该发生在'onLoad'。

At the time before 'onload' runs, when the HTML is first being parsed and it runs your script, there are no elements in the document. It hasn't reached the <body> tag yet, so the "document" is empty. This is still an opportune time to initialize Javascript-only variables and perhaps some other things, but really a large part of your starting code should occur inside of 'onLoad'.

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

In short: Your code's success very much depends on when you call getElementById, not where the var aCanvas statement is. Hope that helps your understanding.

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

相关推荐