8.4w+
社区成员
- 主页
- 问答
【在线等】Dreamwear cs4中使用HTML5的canvas，出现了问题。。。
html文件的代码：
在FireFox浏览器中测试，出现错误
canvas is null
[在此错误处中断] var ctx=canvas.getContext('2d');
Test5canvas.cfm (第 9 行)
<!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 行)
...全文
请发表友善的回复…
发表回复
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 没加载上