HTML5 캔버스 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. JS 작업, 당신은 src 속성 여기

을 설정 한 후 테스트되는 이미지의로드의 canvas

대기의 width 및 height 속성을 설정하는 것을 잊지 마세요 코드 샘플 :

$(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 및 중 10 개 :

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