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>