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

起因:

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

示例代码如下:


自己的模仿代码如下:

// 绘制图片
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)
}

于是图片终于出来:
js使用canvas的drawImage()绘制图片不显示_第1张图片

你可能感兴趣的:(JavaScript)