로드 이벤트를 사용하지 않고 캔버스 drawImage

Question

캔버스에 대한 소개와 그들이 작동하는 방식으로 작은 퀴즈를 만들고 싶었습니다. 색상 만 사용하면 Google을 사용하여 해결할 수없는 문제가 없습니다.

이제 퀴즈에 배경 그림을 보여주고 싶지만 좀 더 정확하게 말하자면 어떤 질문에 다른 그림을 배경으로 사용하고 싶습니다.

qcm.canvas.addEventListener('click', function(evt) { 
     main(qcm, evt); 
    }, false); 

그런 다음, QCM 객체의 값을 사용합니다 내 메인 루프가 무엇을 알고 :

이

내 주요 루프 클릭 그런 작업과 기능에 바인딩 이벤트 :

그래서 내가 이런 짓을 그릴. 어쨌든 캔버스를 지운 다음 캔버스 스켈레톤을 다시 그려야합니다. 현재는 배경 그림 만 지정되어 있습니다.

이것은 clearRect 만 사용하는 명확한 캔버스 기능입니다.

function clearCanvas(qcm) 
{ 
    //Suppression du contenu du canvas 
    qcm.context.clearRect(0, 0, qcm.canvas.scrollWidth, qcm.canvas.scrollHeight); 
    // Rechargement du décor du canvas 
    initCanvas(qcm); 
} 

배경을 그릴해야이 initCanvas 기능이 하나입니다

function initCanvas(qcm) 
{ 
    //Background color 
    //qcm.context.fillStyle = QcmConfiguration.Canvas_BackColor; 
    //qcm.context.fillRect(0,0,qcm.canvas.scrollWidth, qcm.canvas.scrollHeight); 
    if (qcm.backgroundImage != undefined) 
    { 
     var background = new Image(); 
     background.addEventListener('load', function() 
     { 
       qcm.context.drawImage(background, 0, 0, qcm.canvas.scrollWidth, qcm.canvas.scrollHeight); 
     }, false); 
     background.src = qcm.backgroundImage; 
    } 
} 

내 캔버스 끝 "초기화"단계, 그것은 내가 (질문, 대답을 표시 할 프레임을 그릴 때, 점수 ... qcm 상태에 따라).

clearCanvas(qcm); 
log(QcmLogsType.Initialisation, "Chargement du start panel"); 
drawStartPanel(qcm); 

내 drawStartPanel 그냥가 "재생"버튼을 그릴 수있는 기능입니다 : 예를 들어

, 여기에 메인 루프 기능의 일부입니다

function drawStartPanel(qcm) 
{ 
    // Dessin du rectangle colorée pour le bouton play 
    qcm.context.fillStyle = QcmConfiguration.Start_BackButtonColor; 
    qcm.context.fillRect((qcm.canvas.scrollWidth/2) - 25, (qcm.canvas.scrollHeight/2) - 25, 50, 50); 
    // Dessin du triangle "play" 
    qcm.context.fillStyle = QcmConfiguration.Start_ForeButtonColor; 
    qcm.context.beginPath(); 
    qcm.context.moveTo((qcm.canvas.scrollWidth/2) - 10, (qcm.canvas.scrollHeight/2) - 10); 
    qcm.context.lineTo((qcm.canvas.scrollWidth/2) - 10, (qcm.canvas.scrollHeight/2) + 10); 
    qcm.context.lineTo((qcm.canvas.scrollWidth/2) + 12, qcm.canvas.scrollHeight/2); 
    qcm.context.closePath(); 
    qcm.context.fill(); 
} 

을하지만 실행할 때 내 코드, 내 시작 버튼이 그림 아래에있는 것 같습니다. 즉, 그림로드 이벤트가 호출이 진행되는 동안 drawStartpanel 함수 후에 실행되는 것 같습니다.

This 방법은 기본 옵션은 디스플레이로 사진을 넣는 것입니다 : 아무도 HTML 코드에 다음 캔버스에 그려,하지만 나중에 정말 갈 시도 무언가를하려고하기 때문에,이 생각을 정말 좋아하지 않아요 그런 일을 할 수없는 데이터베이스에서 그림을 얻으십시오.그래서

내가 찾고 있어요 :

중 하나를 수동으로 를로드 이벤트를 강제 할 수있는 방법 또는

(I 전체를 게시되지 않은 내 사진을 보여주기 위해로드 이벤트를 사용하지하는 방법을 코드는

Answer 1

단순히이 같은 load 콜백에 drawStartPanel 기능 이동) : 800 개 라인이다하지만 필요합니다 것처럼 :

function initCanvas(qcm, callback) { 
    // Background color 
    // qcm.context.fillStyle = QcmConfiguration.Canvas_BackColor; 
    // qcm.context.fillRect(0,0,qcm.canvas.scrollWidth, qcm.canvas.scrollHeight); 

    if (qcm.backgroundImage !== 'undefined') { 
     var background = new window.Image(); 

     background.onload = function() { 
      qcm.context.drawImage(background, 0, 0, qcm.canvas.scrollWidth, qcm.canvas.scrollHeight); 
      // Here call the start button drawing function assuming it always takes the qcm object as an argument 
      callback(qcm); 
     } 

     background.src = qcm.backgroundImage; 
    } 
} 

이런 식으로 호출 :

clearCanvas(qcm); 
log(QcmLogsType.Initialisation, "Chargement du start panel"); 
initCanvas(qcm, drawStartPanel); 

동 기적으로 적용 도면을 점점 더

또 다른 길을가는이 Javascript Promises