html5 不显示canvas

第一次写html5代码的时候通常会碰到canvas 画布元素不显示的问题。

比如使用javascript画了一个圆，如下面的代码：

 

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

 

原因是js代码没有在canvas加载之后加载，把js代码写在body之后试试，就发现canvas中就有效果了。

 

如果是显示图片，则要在js判断加载完全后显示图片：

 

 

var img = new Image();
img.src = "move1.png";

img.onload=function(){  
	ctx.drawImage(img,0,0,20,20);  
}