No sé por qué este lienzo es nulo.

Question

Nov 05, 2013, 07:20 PM

No sé por qué este lienzo es nulo.

Así que he estado viendo un par de ejemplos de cómo llenar un lienzo con alguna otra imagen, y tan pronto como reorganizo el código, dejan de funcionar. Estoy notando un comportamiento en lienzos que no tiene sentido en comparación con otros tipos de variables de javascript, y me gustaría saber qué está pasando. por ejemplo, si hago algo como esto ...

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

... Aparece un mensaje emergente que dice "Esta variable se ha establecido", que es lo que esperaría, pero si hago algo como esto ...

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

... Recibo una alerta con el mensaje "TypeError: aCanvas no está definido"

Y, sin embargo, si trato de definir el lienzo de la misma manera dentro del mismo intento ...

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

Me sale el mensaje "funcionó"

Entonces, si quiero inicializar una variable global como una cadena o algo simple, entonces puedo hacer referencia a ella en funciones. Si intento inicializar una variable global como un lienzo, mis funciones continúan pensando que es nula. ¿Porqué es eso?