Javascript使用回調畫一個圖像到畫布

Question

我想我有一個類似的問題，this question，但我想了解如何使用回調函數，以及如何實現它爲我的特定情況一點幫助。我試圖讓圖像按需「繪製到畫布上，即任何時候調用某個函數。圖像與我稱之爲塊的對象相關聯。塊有尺寸，座標和網址。

var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 

function Block(x, y, width, height, url) { 
     this.x = x; 
     this.y = y; 
     this.width = width; 
     this.height = height; 
     this.url = url; 
     this.drawBlock = drawBlock; 
     function drawBlock() { 
       var blockSprite = new Image(); 
       blockSprite.src = url; 
       blockSprite.onload = context.drawImage(blockSprite,x,y,width,height); 
     } 
    } 

您可以看到演示here。奇怪的是，如果我鏈接到網絡上的圖像，它會工作，但如果我鏈接到我的磁盤上的圖像失敗。我相信這是因爲onload事件發生在drawBlock被調用之前，而且我需要使用回調函數或承諾來解決這個問題，但我對Javascript很陌生，所以我想在這裏稍微介紹一下。任何幫助或建議，將不勝感激。

Answer 1

試試這樣說：

function Block(x, y, width, height, url) { 
     this.x = x; 
     this.y = y; 
     this.width = width; 
     this.height = height; 
     this.url = url; 
     this.drawBlock=function drawBlock(){ 
       var blockSprite = new Image(); 
       blockSprite.src = url; 
       blockSprite.onload = function(){ 
        context.drawImage(blockSprite,x,y,width,height); 
       } 
     } 
    } 

var block=new Block(0,0,32,32,"house32x32.png"); 
block.drawBlock(); 

的回調僅僅是一個在稍後的時間執行的功能 - 一個長時間運行的任務終於完成了通常在。

加載圖片就是一個很好的例子。考慮以下代碼：

function someCallbackFunction(){ 
    alert("The image has finally been fully loaded"); 
} 

var image=new Image(); 

image.onload=someCallbackFunction; 

image.src="yourImage.png"; 

alert("This code is last, but will execute before the onload function"); 

它將實際執行順序是：創建

1. 的圖像對象。

   var image = new Image（）;

2. 圖像對象被告知完成加載完成後應該執行名爲someCallbackFunction的函數。

   image.onload = someCallbackFunction

3. 的圖像被給予的.src URL，並開始下載圖像

   image.src = 「yourImage.png」 的漫長過程;

4. 執行image.src =「yourImage.png」後的任何代碼。

5. ...稍後...圖像完全加載後，圖像對象將執行someCallbackFunction（）並且警報將會響起。