用canvas画地图，批量加载多张瓦片地图，第一次刷新不显示，之后刷新可以，求解！！！

Question

function load(imgX,imgY){ 
    //移动超过一个256，加载多一个图片
    var xLength = imgX/256
    var yLength = imgY/256          

     var x_ze = long2tile(116.402544,zm)-2  //根据中心点算出中心点的行列号，画布左上角（原点）的行号 ；   
     var y_ze = lat2tile(39.913607,zm)-2    //画布左上角（原点）的列号

      for(var y=-Math.floor(yLength)+y_ze;y<6-yLength+y_ze;y++ ){       //原点的列号-移动距离（超过256像素多加载一张图片）
        for(var x=-Math.floor(xLength)+x_ze;x<6-xLength+x_ze;x++ ){         
        var x_ch = x.toString(16)      //转十六进制                
        var y_ch = y.toString(16)      //转十六进制

        var img=new Image()  
        img.src="/seismis/images/map/L0"+zm+"/R00000"+ y_ch+"/C00000"+ x_ch+".png";           

           if(img.complete){              
           drawBeauty(img,x*256-x_ze*256,y*256-y_ze*256);
           console.info("正常加载");
           }
        else{    
           img.onload = function(){
            console.info("图片未加载");
            drawBeauty(img,x*256-x_ze*256,y*256-y_ze*256);
           }
            img.onerror = function(){
              console.info("图片异常")
              drawBeauty(img,x*256-x_ze*256,y*256-y_ze*256);
           };
        }
    }
 }

}//load

  function drawBeauty(img,x,y){      
    ctx.drawImage(img,x+imgX-300,y+imgY-256,256,256); 

 }

Answer 1

 img.onload = function(){
            console.info("图片未加载");
            drawBeauty(img,x*256-x_ze*256,y*256-y_ze*256);
           }
                改为
                img.onload = function(){
            console.info("图片未加载");
            drawBeauty(this,x*256-x_ze*256,y*256-y_ze*256);////注意是this
           }

要不第一次加载图片从服务器下载需要时间，而img已经是最后一个img了，都是绘制了最后的img。

加载过后从缓存加载走的是if(img.complete)直接绘制当前图片