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

起因：

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

示例代码如下：

<  type=\"text/ \">

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

</ >

自己的模仿代码如下：

// 绘制图片
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赋值后，使用 监听加载图片情况，加载完成后再绘制。
代码如下：

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

于是图片终于出来：