2012-12-09 4 views
1

Windows 8 JavaScript 응용 프로그램을 개발 중입니다.Windows 8 html5 캔버스 기반 응용 프로그램의 이상한 동작

이미지를 캔버스에로드하려고 시도하지만 CTRL + F5을 사용하여 앱을 직접 실행하면 앱이 실행되지만 캔바스에 이미지가 없습니다.

중단 점을 지정하지 않고 앱을 디버깅 할 때 앱이 바로 열리지 만 여전히 이미지는 없습니다.

breakpoint 앱을 디버그 한 다음 이미지 생성 코드가 완료되면 코드를 단계별로 실행합니다. 디버그 기호를 클릭하여 디버그를 계속하면 이미지가 캔버스에 표시됩니다. 난 왜 여기에 무슨 일이 일어나고 있는지 전혀 몰라요 왜 그것은 중단 점과 디버그에서 이미지를 보여주는 것입니다. 디버깅하지 않고 이미지를 정상적으로 실행할 때 이미지가 표시되지 않는 이유는 무엇입니까?

다음은 이미지 생성을위한 코드입니다.

Init: function (canvas,ctx) { 

    this.ghostCanvas = canvas; 
    this.ghostCanvasCtx = ctx; 

    var banner = new Image(); 
    banner.src = "images/banner.jpg"; 

    ctx.drawImage(banner, 100, 100); 
} 

이 코드는 중단 점을 배치하고 한 줄씩 실행하면 작동합니다. 또한 두 개의 캔버스 중 하나를 사용하고 있습니다. 그러나이 캔버스의 z- 인덱스는 더 커지기 때문에 문제가되지 않아야합니다. 이 문제의 원인은 무엇입니까?

답변

1

캔버스에 그리기 전에 이미지가로드 될 때까지 기다려야합니다. 'load'이벤트에 대한 이미지 객체에 이벤트 핸들러를 추가하고 이라고 말하면 캔버스에 이미지를 그립니다.

관련 문제