HTML5 – Chrome中canvas标签显示图片空白问题

返回顶部
查看留言
转到底部

现在的位置: 首页 > 综合 > 正文

HTML5 – Chrome中canvas标签显示图片空白问题

2013年09月07日 ⁄ 综合 ⁄ 共 750字 ⁄ 字号小中大 ⁄ 评论关闭

一、问题：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript" >
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="1.jpg";
cxt.drawImage(img,0,0,500,500);
</script>
</body>
</html>

二、解决：

在11行处加onload事件

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript" >
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="1.jpg";
img.onload=function(){
cxt.drawImage(img,0,0,500,500);
}
</script>
</body>
</html>