は、私は次の操作を実行すると仮定され、次のコードを持っているループ

のためにキャンバスにイメージを作成できません：は、私は次の操作を実行すると仮定され、次のコードを持っているループ

（これは正常に動作します）動的それぞれについて、
をhtmlページ上の2つのキャンバス要素を作成します。 Canvas要素で、キャンバス要素のどの位置にどの画像を表示するかを表すallSteps変数を調べます。このハードコーディングされた例では、最初のキャンバスの下部に2つの黒いボックスが表示され、2番目のキャンバスの下部に2つの茶色のボックスが表示されます。（これは正しく動作しません）。すべての画像は50x50です。

何らかの理由で、第2キャンバスの最後に1つの画像しかロードされません。

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 

     var boxImages = ['img/white.jpg', 'img/blue.jpg', 'img/black.jpg', 'img/brown.jpg', 'img/green.jpg', 'img/red.jpg']; 
     var IMAGE_WIDTH=50; 
     var MAX_COLS = 7; 
     var MAX_ROWS = 8; 
     var numberOfSteps = 2; 
     var allSteps = []; 
     allSteps[0] = '0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 2'; 
     allSteps[1] = '0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 3'; 

     $('#result_div').html('<p>All Steps : ' + allSteps + '</p>'); 

     for (count=0; count < numberOfSteps; count++) 
     { 
      $('#result_div').append('<h3>Step : ' + count + '</h3>'); 
      $('#result_div').append('<p><canvas id="resultCanvas' + count + '" width="350" height="400" style="border:1px solid #c3c3c3;" ></p>'); 
      resultCanvas=document.getElementById('resultCanvas'+count); 
      resultCtx = resultCanvas.getContext("2d"); 

      currentSolution = allSteps[count].split(" "); 
      for (r=0; r < MAX_ROWS; r++)  
      { 
       for (c=0; c < MAX_COLS; c++) 
       { 
        imgNumber=currentSolution[((r)*MAX_COLS)+c]; 
        if (imgNumber != 0) 
        {     

         boxX = (c*IMAGE_WIDTH); 
         boxY = (r*IMAGE_WIDTH); 
         cimg=new Image(); 
         cimg.onload = function(){resultCtx.drawImage(cimg,boxX,boxY);}; 
         cimg.src=boxImages[imgNumber]; 
        }       
       } 
      } 
     } 
    }); 
    </script> 
<body> 

<div id="result_div"></div> 


</script> 
</body> 
</html>

出典

2012-04-12 user1328174

私はまだこれをテストしていませんが、私はあなたがイメージが実際にロードされているよりも、あなたのcimg.srcとcimg.onload速く上書き思います。代わりに画像の配列を使ってみましたか？

var cimgs = []; 

    var IMAGE_WIDTH=50; 
    /* 
     ... 
    */ 

      if (imgNumber != 0) 
      {     

       boxX = (c*IMAGE_WIDTH); 
       boxY = (r*IMAGE_WIDTH); 
       cimgs.push(new Image()); 
       cimgs[cimgs.length - 1].onload = (function(img,x,y){ 
        return function(){resultCtx.drawImage(img,x,y);}; 
       })(cimgs[cimgs.lenght - 1],boxX,boxY); 
       cimgs[cimgs.length - 1].src = boxImages[imgNumber]; 
      }       
     }

出典

2012-04-12 05:42:16 Zeta

これは私の推測でもあります。キャンバスとイメージを操作する場合は、まだロードされていない場合でもエラーが発生する可能性があるため、すべてのイメージを描画する前に必ずonloadイベントが発生していることを確認する必要があります。 –

私はこれをテストしましたが、動作しませんでした。変更後、画像は表示されませんでした（以前とは異なります）。ここで配列がなぜ使われているのか聞いてもよろしいですか？イメージのロード/レンダリングプロセスをループと同期させることを想定していますか？次のイベントを描画する前に、イメージに対してonloadイベントが発生したことを確認する他の方法はありますか？これまでのすべてのご支援をいただきありがとうございます。私はこのトピックについての詳細を見つけることができる参考文献をお読みください。 :) – user1328174

ここで解決策を見つけました：http://www.boogdesign.com/examples/canvas/multiple-onload.html – user1328174

は、私は次の操作を実行すると仮定され、次のコードを持っているループ

答えて

関連する問題