HTML5关于js在body中的位置的问题

小鱼吹泡泡 发布于 2012/12/13 17:43
阅读 2K+
收藏 1

收藏!数据建模最全知识体系解读!>>>

下面是我执行的html文件的代码

<!DOCTYPE HTML>
<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript" >
  var canvas = document.getElementById("myCanvas");
  var cxt = canvas.getContext("2d");
  cxt.moveTo(10,10);
  cxt.lineTo(150,50);
  cxt.lineTo(10,50);
  cxt.stroke();
</script>
</body>

</html>

如此没有错,当js代码位置按下面这样放的时候就会报canvas对象为null,希望各位高手提供原因!!!

 

<!DOCTYPE HTML>
<html>

<body>

<script type="text/javascript" >
  var canvas = document.getElementById("myCanvas");
  var cxt = canvas.getContext("2d");
  cxt.moveTo(10,10);
  cxt.lineTo(150,50);
  cxt.lineTo(10,50);
  cxt.stroke();
</script>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</body>

</html>

 

加载中
1
只会百度的程序员
只会百度的程序员
因为script放在canvas前面的话,script执行 document.getElementById("myCanvas"),立即 去找这个canvas,但此时canvas还没在document中,根本找不到;放在canvas后面的话,由于在执行这句之前,canvas已经在文档中了,所以可以找到,问题就是这样的。
0
只会百度的程序员
只会百度的程序员

引用来自“小鱼吹泡泡”的答案

非常感谢

如果代码如下,就无所谓放在哪里了。因为这段代码是在文档加载完成后才会去执行。
<script type="text/javascript" >
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var cxt = canvas.getContext("2d");
        cxt.moveTo(10,10);
        cxt.lineTo(150,50);
        cxt.lineTo(10,50);
        cxt.stroke();
    }
</script>

小鱼吹泡泡
小鱼吹泡泡
嗯嗯,是的,试了可以,非常3 g u
返回顶部
顶部