javascript：畫布上的圖像繪制（背景）

Question

所以我遇到的問題是我不能先繪制背景，然后在背景上繪制其他所有內容。 在我的代碼中的某些地方（在循環函數中）它可以工作，但在我的初始化函數中卻沒有。 首先介紹一下我的代碼：

獲取背景img並繪制它的代碼：

function imgImport(imgName,ctx){
    var img = new Image();
    img.onload = function(){
        ctx.drawImage(img,0,0);
    };
    img.src = 'client/img/' + imgName + '.jpg';
}

module.exports = imgImport;

很酷，現在在我的初始化函數中，我像這樣使用上面的代碼：

// var img = new Image();
// img.src = 'client/img/spaceship.jpg';
// ctx.drawImage(img,0,0);
Img('spaceship',ctx);
drawGrayzonePlanets(ctx,serverObjects);

現在不要介意 3 條注釋行。 第一個活動行 Img('spaceship', ctx): 是上面通過 nodejs 使用的 imgImport 函數。 DrawGrayzonePlanets 可以在下面看到：

function drawGrayzonePlanets(ctx,serverObjects){
  for(object in serverObjects){
    obj = serverObjects[object];
    Drawobjects(ctx,obj);
  }
}

本質上，上面的函數從服務器獲取數據並使用 Drawobjects() 函數繪制行星，如下所示：

function drawObjects(ctx,status){
    switch(status.shape){
      case "circle":
        var status = status.cic;
        console.log(status);
        ctx.fillStyle = status.color;
        ctx.beginPath();
        ctx.arc(status.x,status.y,status.planetSize,0,2*Math.PI);
        ctx.stroke();
        ctx.fill();
        break;
    }
}

module.exports = drawObjects;

現在，如果我先運行 Img() 函數，然后再運行 drawGrayzonePlanets() 函數，行星將被繪制在背景后面，這意味着它們無法被看到。 如果我更改代碼的順序，也會發生同樣的情況，這很明顯。 現在我找到了通過取消注釋 3 行並注釋掉 img() 函數來解決這個問題的方法。 並保留 drawGrayzonePlanets() 函數。 像這樣：

var img = new Image();
img.src = 'client/img/spaceship.jpg';
ctx.drawImage(img,0,0);
//Img('spaceship',ctx);
drawGrayzonePlanets(ctx,serverObjects);

上面的代碼有效，行星將被繪制在背景上。 但我只是不明白為什么該方法有效，而不僅僅是僅使用 Img() 函數。 它可能與 img.onload = function(){} 有關，但我不明白為什么？

有人可以解釋實際發生的事情嗎？

Answer 1

在您的第一個代碼中，您正在等待背景完成加載，然后繪制它。 這顯然晚於其他圖像的繪制。 在您的第二個代碼中，您不是在等待加載。 最好的解決方案是回調：

function imgImport(imgName,ctx,callback){
  var img = new Image();
  img.onload = function(){
    ctx.drawImage(img,0,0);
    callback();
   };
   img.src = 'client/img/' + imgName + '.jpg';
}

比這樣使用：

 Img('spaceship',ctx,function(){
   alert("bckground loading finished. Continue loading...");
   drawGrayzonePlanets(ctx,serverObjects);
});

Answer 2

因為你的 imgImport 是一個異步函數。 img.onload的代碼在圖像加載后運行 - 但當圖像仍在加載時，其余代碼將運行，繪制行星。 然后，過了一會兒，圖像到達並將其繪制在上面。

例如，您可以為 imgImport 函數提供第三個回調參數並在那里運行其余代碼：

function imgImport(imgName,ctx,callback){
    var img = new Image();
    img.onload = function(){
        ctx.drawImage(img,0,0);
        callback()
    };
    img.src = 'client/img/' + imgName + '.jpg';
}

並像這樣執行它：

Img('spaceship',ctx,function() {
    drawGrayzonePlanets(ctx,serverObjects);
});