畫布：drawImage不能將圖像繪制到畫布

Question

我正在用帆布做游戲。 我有一個Sprite對象，它可以將自己繪制到畫布上，在創建對象時，在Sprite類中創建Image成員及其src屬性。

這是不起作用的代碼：

Sprite.prototype.draw = function(Context){
    this.Image.onLoad = function(){
    Context.drawImage(this.getImage(),this.getX(),this.getY());
    };
};

在對象構造函數中，我傳入一個字符串參數，該字符串參數是Image的文件路徑-這已正確存儲。

我感覺問題出在setImage函數中：

Sprite.prototype.setImage = function(){
    this.Image = document.createElement('img');
    this.Image.src = this.getImagePath(); //This just returns the path as a                                                                      
                                            string
};

我在運行時沒有錯誤...但是圖像沒有繪制到屏幕上？

任何人都可以指出發生了什么事？ 我一直在尋找答案，但是每個人的所有元素都是在html文檔中創建的，而我的所有元素都是動態創建的，不知道這有什么區別。

干杯

Answer 1

您的代碼是建立在同步模型上的，但是您使用的是異步調用，這意味着這將無法正常工作。

首先，在圖像對象上設置一個url，這意味着將立即調用加載過程。 在您隨后調用draw時，圖像可能已經加載或可能尚未加載（如果它存在於緩存中，此過程通常是即時的），因此當您設置onload處理程序（必須為小寫）時，圖像對象可能已通過該階段，它將永遠不會被調用（瀏覽器不會等待它被設置）。

為此，您需要使用其他模型，例如回調和/或promise。 為簡單起見，回調將很好。

例如：

Sprite.prototype.setImage = function(callback){
    this.Image = document.createElement('img');
    this.Image.onload = function() {
        callback(this); /// just for ex: passing image to callback (or other inf)
    }
    this.Image.src = this.getImagePath();
};
Sprite.prototype.draw = function(Context){
    Context.drawImage(this.getImage(), this.getX(), this.getY());
};

這樣，當圖像加載后，它將調用您指定為回調的函數，再次例如：

var sprite = new Sprite(); /// pseudo as I don't know you real code

sprite.setImagePath('someurl');
sprite.setImage(imageLoaded);

function imageLoaded() {
    sprite.draw(context);
}

（我個人將合並setImagePath和setImage保持簡單。）