第一个问题:
把图片加载进CANVAS后,再把canvas加载进JSON,为什么source.B可以用,source.A不可以用?下面是代码
function load_source(url,w,h){
this.canvas = document.createElement('canvas');
this.canvas.width = w;
this.canvas.height = h;
this.ctx = this.canvas.getContext('2d');
this.img = new Image();
this.img.src = url;
this.img.onload = function () {
this.ctx.drawImage(this.img,0,0);
}.bind(this);
return this.canvas;
}
source.A = load_source('images/player/build1.png',1024,1024);
source.B = load_source('images/player/map1.png',500,500);
第二个问题:
function preImage(url,callback,getarray){
var img = new Image(); //创建一个Image对象,实现图片的预下载
img.src = url;
if (img.complete)
callback(img,getarray);
else{
img.onload = function () {
callback(img,getarray);
}
}
}
for循环调用上面为什么不按顺序执行呢?和第一个没关系
第一个
在load_source方法中都用的是this而不是var来申明,调用时也没有使用new来创建新对象
function在js中也是Object
执行了source.A再执行source.B一直都是对同一个对象在操作,所以B覆盖了A
第二个图像的加载是异步的,每个图像大小不一样,加载完毕的时间也不一样,所以调用onload后的callback时间顺序也会不一样。