js代码没错，为什么打开网页没效果

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>画布</title>
<script type="text/javascript">var canvas = document.getElementById("myCanvas");
if(canvas && canvas.getContext){
   var cxt = canvas.getContext("2d");
   cxt.fillStyle="#FF0000";
   cxt.fillRect(0,0,200,150);
}
</script>
</head>//为什么没效果，换种方式就可以<body>
      <canvas id="myCanvas" width="300" height="150" style="border:1px dashed #c3c3c3;">
      </canvas>
</body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>画布</title>
<script type="text/javascript">
function A(){
var canvas = document.getElementById("myCanvas");
if(canvas && canvas.getContext){
   var cxt = canvas.getContext("2d");
   cxt.fillStyle="#FF0000";
   cxt.fillRect(0,0,200,150);
}
}
</script>
</head>//换这种方式就可以<body onload="javascript:A();">
      <canvas id="myCanvas" width="300" height="150" style="border:1px dashed #c3c3c3;">
      </canvas>
</body>

解决方案 »

  1.   

    JS代码需要放在获取的标签下面才能有效。 页面是从上到下执行的，第一种先执行JS代码，执行到var canvas = document.getElementById("myCanvas");这行的时候发现页面中并没有这个元素所以这行没效果，然后继续执行 <canvas id="myCanvas" width="300" height="150" style="border:1px dashed #c3c3c3;">
          </canvas>到这里 这个元素才被创建出来。  总之没有创建的元素时无法获取的。
      

  2.   

    在全局环境下的代码是在页面加载阶段从上到下一边加载一边执行的，这时处于代码下面的页面元素还没有加载完，访问不到。
    要把script放在页面body下面，或者放到window.onload事件（页面加载完成后触发）中才可以