html5 不显示canvas

iteye_6345

于 2011-11-29 15:34:35 发布

阅读量1.1k

点赞数

分类专栏： HTML5 文章标签： html5

HTML5 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在HTML5中使用canvas元素时遇到的常见问题——元素不显示，并提供了解决方法。通过将JavaScript代码放置在body标签之后，确保在canvas加载后执行JS代码，可以解决画图效果无法正常显示的问题。此外，对于显示图片的情况，需在JS代码中判断图片加载完成后再进行绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一次写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);  
}