HTML5 Canvas drawImage TideSDK

Question

我正在創建一個HTML5應用程序並使用TideSDK進行打包。我試圖讓圖像在畫布上顯示;然而，盡我所能，沒有任何顯示。我已經指出了問題所在的目錄中的圖像文件的位置（我用jsFiddle中的圖像從網上運行相同的代碼，它很好），所以有一個特定的地方，我應該把我的圖像放置TideSDK能找到它嗎？謝謝！

$(document).ready(function() { 
    var canvas = $("#game"); 
    var context = $("#game")[0].getContext("2d"); 
    context.font="18px OpenSans"; 
    var backImage = new Image(); 
    backImage.src="../images/homeBackground.jpg"; 
    homeScreen(); 

    function homeScreen() 
    {  
     context.drawImage(backImage, 0, 0);  
    } 
}); 

文件目錄：

CGS 
| 
Resources 
    | 
    css 
    fonts 
    images 
     | 
      homeBackground.jpg 
    js 
    | 
      game.js (where the above code is located) 
      jquery.js 
    index.html 
    Dist 

Answer 1

你缺少兩件事情。

1. 不要忘記你設置src屬性

這裏後設置canvas

等待width和height屬性爲圖像的加載經過測試，工作的js代碼示例：

$(document).ready(function() { 
    var canvas = $("#game"); 
    var context = canvas[0].getContext("2d"); 
    context.font="18px OpenSans"; 
    var backImage = new Image(); 
    backImage.onload = function() { 
     homeScreen(); 
    }; 
    backImage.src="../images/homeBackground.jpg"; 

    function homeScreen() 
    {  
     context.drawImage(backImage, 0, 0);  
    } 
}); 

而且不要忘記設置width和height的canvas：

<canvas id="game" width="500" height="500"></canvas>