【在线等】Dreamwear cs4中使用HTML5的canvas，出现了问题。。。

1988_1989 2011-10-26 05:04:42

html文件的代码：

<!DOCTYPE html >

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>canvas</title>

<script type="text/javascript">



var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);



</script>

</head>



<body>



<canvas id="myCanvas"  width="300" height="150">

Fallback content, in case the browser does not support Canvas.

</canvas>

</body>

</html>

在FireFox浏览器中测试，出现错误
canvas is null
[在此错误处中断] var ctx=canvas.getContext('2d');
Test5canvas.cfm (第 9 行)

...全文

262 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

1988_1989 2011-10-26

打赏
举报

谢谢各位前辈。。

liangws 2011-10-26

打赏
举报

你调用document的时候，document还没加载出来，放body下面或者用window.onload

zell419 2011-10-26

打赏
举报



 window.onload = function(){

    var canvas=document.getElementById('myCanvas');

    alert(canvas);

    var ctx=canvas.getContext('2d');

    ctx.fillStyle='#FF0000';

    ctx.fillRect(0,0,80,100);

};

注意元素加载顺序。
window.onload 页面加载完执行。

001007009 2011-10-26

打赏
举报



<!DOCTYPE html >

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>canvas</title>



</head>



<body>



<canvas id="myCanvas"  width="300" height="150">

Fallback content, in case the browser does not support Canvas.

</canvas>

<script type="text/javascript">



var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);



</script>

</body>

</html>