0

次のことを行うと思われる次のコードがあります。

  1. HTML ページに 2 つの Canvas 要素を動的に作成します (これは正常に機能します)。
  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>
4

1 に答える 1

1

これはまだテストしていませんが、画像が実際に読み込まれるよりも速く上書きする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-12T05:42:16.730 に答える