js使用canvas的drawImage()绘制图片不显示

起因：

在使用canvas绘制图片时，发现根据w3cschool里面的绘制代码绘制图片显示不出来。

示例代码如下：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);

</script>

自己的模仿代码如下：

// 绘制图片
function drawImg(){
    var img = new Image();
    img.src = "ic_animal.png";
    console.log("path is "+img.src)
    ctx.drawImage(img, 0,0,100, 100);
}

原因：

img.src加载图片需要时间，虽然img对象已经赋值成功，但是图片还没有加载完成。这时立即调用canvas里的drawImage是绘制不出来的。

解决方法：

正确的做法是给img的src赋值后，使用onload监听加载图片情况，加载完成后再绘制。
代码如下：

// 绘制图片
function drawImg(){
    var img = new Image();
    img.src = "ic_animal.png";
    // 等待加载完成再绘制
    img.onload = function(){
        ctx.drawImage(img, 0,0,50, 50);
    }
    console.log("path is "+img.src)
}

于是图片终于出来：