Nie wiem, dlaczego to płótno jest puste
Tak więc przyglądałem się kilku przykładom wypełniania płótna innym obrazem i gdy tylko nieznacznie zmieniłem kod, przestają działać. Zauważam pewne zachowanie na płótnach, które nie ma sensu w porównaniu z innymi typami zmiennych javascript, i chciałbym wiedzieć, co się dzieje. na przykład, jeśli zrobię coś takiego ...
<!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>
... Dostaję pop-up z napisem „Ta zmienna została ustawiona”, czego bym się spodziewał, ale jeśli zrobię coś takiego ...
<!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>
... Otrzymuję alert z komunikatem „Błąd typu: aCanvas jest niezdefiniowany”
A jednak, jeśli spróbuję zdefiniować płótno w ten sam sposób w samej próbie ...
<!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>
Dostaję wiadomość „działało”
Jeśli więc chcę zainicjować zmienną globalną jako ciąg lub coś prostego, mogę odwołać się do niej w funkcjach. Jeśli próbuję zainicjować zmienną globalną jako kanwę, moje funkcje uważają, że jest ona zerowa. Dlaczego?