javascript - js canvas画图的两个问题
高洛峰
高洛峰 2017-04-11 13:32:55
0
1
542

第一个问题:

把图片加载进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循环调用上面为什么不按顺序执行呢?和第一个没关系

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

reply all(1)
Ty80

第一个
在load_source方法中都用的是this而不是var来申明,调用时也没有使用new来创建新对象
function在js中也是Object
执行了source.A再执行source.B一直都是对同一个对象在操作,所以B覆盖了A

第二个图像的加载是异步的,每个图像大小不一样,加载完毕的时间也不一样,所以调用onload后的callback时间顺序也会不一样。

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template