html5中canvas绘制img时，显示不了图片

Question

<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().src="canva_img.png";

cxt.drawImage(img,10,10);

</script>

Answer 1

我自己试了一下，发现了问题，应该是canvas第一次绘图的时候图片还没来得及加载（在地址栏按enter图片能刷新出来）。只需把 cxt.drawImage(img,10,10) 改成如下代码img.onload = function() {   cxt.drawImage(img,10,10); }图片就能显示出来。就酱望采纳。

Answer 2

打开控制台看看有没有报错？