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

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