为什么init方法画不出来canvas而render可以画出来

Question

var source = {};

  function load_source(url,w,h,type){//返回图片还是canvas

    this.canvas = document.createElement('canvas');

   ...

    this.ctx =this.canvas.getContext('2d');

    this.img = new Image();

  

    this.img.onload = function () {

        this.ctx.drawImage(this.img,0,0);

    }.bind(this);

    this.img.src = url;

    if(type=='canvas')

        return this.canvas;

    else if(type=='img')

        return this.img

}

source.build = new load_source('http://ut.png',1024,1024,'canvas');

source.lk = new load_source('http://ht.png',1024,1024,'canvas');

function Map_interpret(){

    this.init = function(){//初始化地图

      ...

    }

    this.render = function(){//初始化地图

        

     this.ctx.drawImage(source.lk,0,0);

    }

    

}

m = new Map_interpret();

m.init();

m.render();

临时写的精简的代码可能会报小错误（思路是图片画到canvas里，再把这个canvas画到另一个canvas里，并显示），主要问题是为什么init方法里面的this.ctx.drawImage(source.build,0,0)画出来的canvas不显示，而render里的this.ctx.drawImage(source.lk,0,0);可以画出来

Answer 1

this.img.onload = function () {    this.ctx.drawImage(this.img,0,0); }.bind(this); this.img.src = url;if(type=='canvas')     return this.canvas;else if(type=='img')     return this.img我感觉是这的问题，你确定这样写走到return的时候已经onload了？意思就是你返回canvas的时候还没有调用onload中的drawInage方法嘞;把判断和返回放到onload函数中试试看this.img.onload = function () {    this.ctx.drawImage(this.img,0,0);         if(type=='canvas')         return this.canvas;else if(type=='img')         return this.img }.bind(this); this.img.src = url;