javascript - js canvas画图的两个问题

问题描述

问 题

第一个问题：

把图片加载进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时间顺序也会不一样。

这篇关于javascript - js canvas画图的两个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！