问题描述
- Html5 canvas 基础demo 为什么都没有
-
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script> </head> <body> <canvas id="myCanvas" width="320" height="220"></canvas> </body> </html>
解决方案
代码放到canvas下面,放前面找不到对象了
<canvas id="myCanvas" width="320" height="220"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
解决方案二:
是在支持html5的浏览器上运行的么?ie9以前的浏览器都是不支持的。
解决方案三:
不懂你的意思;这是Html5 canvas 基础demo :可以参考一下http://blog.csdn.net/qq_19558705/article/details/50519952
解决方案四:
你觉得你的代码没有问题?为什么会出现这种情况?你的问题得从浏览器解析HTML入手,代码是从上而下的执行方式,你把js代码放在了canvas之前,此时js调用myCanvas这个对象时就会找不到它。
解决方法 1.你可以选择代码放在放在body中且放最后比较推荐此种方法 2.你把script标签中的代码一个构造函数中比如
function draw(){ 代码 },最后写个window.onload=function(){draw()},这句话意思是当文档加载完成之后才会执行这个函数。好了以上是我给你的两种解决方法。有什么不理解的欢迎提问
时间: 2024-10-26 11:37:54