【在线等】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 行)
...全文
213 点赞 收藏 4
写回复
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>






老楼 dom 没加载上
回复
发动态
发帖子
JavaScript
创建于2007-09-28

8.4w+

社区成员

Web 开发 JavaScript
申请成为版主
社区公告
暂无公告