use*_*656 1 javascript html5 canvas
所以我一直在看几个如何用其他图像填充画布的例子,一旦我重新排列代码,他们就会停止工作.我注意到与其他类型的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.这是为什么？
在'onload'运行之前,当首次解析HTML并运行脚本时,文档中没有元素.它尚未到达<body>标签,因此"文档"为空.这仍然是初始化仅Javascript变量以及其他一些事情的适当时机,但实际上很大一部分起始代码应该出现在'onLoad'中.
简而言之:您的代码的成功在很大程度上取决于您何时致电getElementById,而不是var aCanvas声明的位置.希望有助于您的理解.
| 归档时间： |
|
| 查看次数： |
2138 次 |
| 最近记录： |