2 xiaochun365 xiaochun365 于 2016.02.20 00:25 提问

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>

4个回答

showbo
showbo   Ds   Rxr 2016.02.20 09:54

代码放到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>
caozhy
caozhy 赞,眼尖
接近 2 年之前 回复
caozhy
caozhy   Ds   Rxr 2016.02.20 08:20

是在支持html5的浏览器上运行的么?ie9以前的浏览器都是不支持的。

qq_19558705
qq_19558705   Ds   Rxr 2016.02.20 09:27

不懂你的意思;这是Html5 canvas 基础demo :可以参考一下http://blog.csdn.net/qq_19558705/article/details/50519952

sinat_26049527
sinat_26049527   2016.02.20 23:07

你觉得你的代码没有问题?为什么会出现这种情况?你的问题得从浏览器解析HTML入手,代码是从上而下的执行方式,你把js代码放在了canvas之前,此时js调用myCanvas这个对象时就会找不到它。
解决方法 1.你可以选择代码放在放在body中且放最后比较推荐此种方法 2.你把script标签中的代码一个构造函数中比如
function draw(){ 代码 },最后写个window.onload=function(){draw()},这句话意思是当文档加载完成之后才会执行这个函数。好了以上是我给你的两种解决方法。有什么不理解的欢迎提问

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!