HTML5 canvas drawImage가 첫 번째 클릭에서 작동하지 않습니다.

Question

저는 캔버스를 사용하여 텍스트와 이미지를 표시하는 자바 스크립트 함수를 사용하고 있습니다. 내가 겪고있는 문제는 클릭이 기능을 수행하고 텍스트를 표시하지만 항상 이미지를 배치하지는 않는다는 것입니다. 두 번 클릭하면 이미지가 나타납니다. 이 동작은 모든 브라우저에서 일관됩니다. 명령이 느리지는 않으며 이미지를 처음으로 표시하는 데 실패합니다. TIA

// JavaScript Document 

    function manualsTxt() { 
     var theCanvas = document.getElementById('Canvas1'); 
     if (theCanvas && theCanvas.getContext) { 
      var ctx = theCanvas.getContext("2d"); 

      if (ctx) { 
       var img1 = new Image(); 
       var img2 = new Image(); 
       var img3 = new Image(); 
       img1.src = "images/InRoads2004.png"; 
       img2.src = "images/XMUp.png"; 
       img3.src = "images/XM.png"; 

       //clear canvas 
       ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 

       // .drawImage (src, posX, posY); 
       ctx.drawImage (img1, 50, 325); 
       ctx.drawImage (img2, 250, 325); 
       ctx.drawImage (img3, 450, 325); 

       ctx.textBaseline = 'bottom'; 
       ctx.font   = 'bold 30px sans-serif'; 
       ctx.fillStyle = '#671420'; 
       ctx.fillText ('InRoads Manuals', 60, 30); 

       ctx.fillStyle = '#000'; 
       ctx.font   = 'italic bold 16px sans-serif'; 
       ctx.textBaseline = 'top'; 
       ctx.fillText ('MJM Consulting has published several InRoads training', 80, 60); 
       ctx.fillText ('manuals that have been used all over the world. We have', 90, 80); 
       ctx.fillText ('utilized our training manuals in all of our on-site trainings', 100, 100); 
       ctx.fillText ('for dozens of civil engineering firms and Department of', 105, 120); 
       ctx.fillText ('Transportations. Our manuals were one of the first to follow', 110, 140); 
       ctx.fillText ('a typical civil design project format. Our manuals are easy', 115, 160); 
       ctx.fillText ('to follow and contain a cd with a self-installing data set.', 115, 180); 
       ctx.fillText ('While our manuals are listed on other sites such as Amazon.com,', 115, 220); 
       ctx.fillText ('ordering direct from us is the only place you will get a', 110, 240); 
       ctx.fillText ('full color version of the manual.', 105, 260); 

      } 
     } 
    } 

Answer 1

이미지로드가 완료 될 때까지 기다리지 않으므로.

var img = new Image(); // Create new img element 
img.onload = function(){ 
    // execute drawImage statements here 
}; 
img.src = 'myImage.png'; // Set source path 

그리기 전에 각 이미지에 대해 onload 이벤트가 발생했는지 확인하십시오. 이미지가 여러 개인 경우 복잡한 작업을하고 싶지 않은 경우 pxloader과 같은 라이브러리가 있습니다.