Javascript 画布图像绘制顺序

我正在做一个简单的引擎等轴测游戏使用在未来

问题是我在画布上画画有困难。以该代码为例：

function pre_load() {
    var imgs = ['1', '1000','1010','1011','1012','1013'];
    var preload_image_object = new Image();
    $.each(imgs,function(i,c){
        preload_image_object.src='img/sprites/'+c.logo+'.png';
    })
}

function GameWorld() {
    //[...]
    this.render = function() {
        this.draw(1000, this.center);
        this.draw(1013, this.center);
        this.draw(1010, this.center);
    }

    this.draw = function(id, pixel_position) {
        draw_position_x = pixel_position[0] - this.tile_center[0];
        draw_position_y = pixel_position[1] - this.tile_center[1];

        inst = this;
        var img = new Image();
        img.onload = function () {
            inst.ctx.drawImage(img, draw_position_x, draw_position_y);
            console.log('Drawn: ' + id);
        }
        img.src = "img/sprites/"+id+".png";
    }

}

人们可能会期望按照顺序绘制，ID1000，然后ID1013，然后ID1010，因为图像已经加载（即使没有，目前我正在本地服务器上工作）

但如果我多次刷新页面，我会得到不同的结果：

案例1

案例2

案例3

（可能发生任何其他排列）

我能想到的唯一解决方案是使函数“挂起”，直到onload事件被调用，然后再进行下一个.draw（）调用。这是正确的方法吗？我该怎么做呢？有更好的解决办法吗

---

谢谢

你的直觉是正确的……你需要一个图像加载器

有很多图像加载器模式——这里有一个：

当您的所有图像都已完全加载时，下面的imgs[]阵列将按正确顺序排列您的精灵

var imgURLs = ['1', '1000','1010','1011','1012','1013'];
var imgs=[];
var imgCount=0;

function pre_load(){

    for(var i=0;i<imgURLs.length;i++){

        var img=new Image();
        imgs.push(img);
        img.onload=function(){
            if(++imgCount>=imgs.length){ 

                // imgs[] now contains all your images in imgURLs[] order

                render(); 

            }
        }
        img.src= "img/sprites/"+imgURLs[i]+".png";
    }

}

var imgURLs=['1'，'1000'，'1010'，'1011'，'1012'，'1013']；
var-imgs=[]；
var imgCount=0；
函数预加载（）{
对于（var i=0；i你的直觉是正确的……你需要一个图像加载器

有很多图像加载器模式——这里有一个：

当您的所有图像都已完全加载时，下面的imgs[]阵列将按正确顺序排列您的精灵

var imgURLs = ['1', '1000','1010','1011','1012','1013'];
var imgs=[];
var imgCount=0;

function pre_load(){

    for(var i=0;i<imgURLs.length;i++){

        var img=new Image();
        imgs.push(img);
        img.onload=function(){
            if(++imgCount>=imgs.length){ 

                // imgs[] now contains all your images in imgURLs[] order

                render(); 

            }
        }
        img.src= "img/sprites/"+imgURLs[i]+".png";
    }

}

var imgURLs=['1'，'1000'，'1010'，'1011'，'1012'，'1013']；
var-imgs=[]；
var imgCount=0；
函数预加载（）{
对于（var i=0；iYou也可以使用回调方法，类似于
this.draw=function（id，pos，callback）{…img.onload=function（）{…callback.call（）；}；
您也可以使用回调方法，类似于
this.draw=function（id，pos，callback）{…img.onload=function（）{…callback.call（）；}；