为什么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;