0

JavaScriptを使用して一連の画像をHTML5キャンバスに描画したいと思います。次のwhileループがあり、すべての画像をキャンバスに描画することを望んでいましたが、現在は最初の画像のみを描画しています。

function drawLevelOneElements(){
            /*First, clear the canvas */
            context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height);
            /*This line clears all of the elements that were previously drawn on the canvas. */

            /*Then redraw the game elements */
            drawGameElements();

            /*Draw the elements needed for level 1 (26/04/2012) */
            var fileName = 1;
            var imagePositionX = 20;
            var imagePositionY = 30;
            while(fileName < 11){
                /*Create an array of images here, move to next element of array on each iteration */
                var numbers = new Array();
                numbers[0] = "1.png"
                numbers[1] = "2.png"
                numbers[3] = "3.png"
                numbers[4] = "4.png"
                numbers[5] = "5.png"
                image.src = fileName+".png";
                image.src = numbers[0];
                image.onload = function(){
                    context.drawImage(image, imagePositionX, imagePositionY, 50, 50);
                }
                fileName = fileName+1;
                imageY = imageY+20;
                console.dir(fileName); /* displays in the console- helpful for debugging */
            }

この関数が何をすることを望んでいたかについて話すために：

  1. 各画像を配列の異なる要素にロードします（したがって、1.pngはnumbers [0]になり、2.pngはnumbers [1]になります）。

  2. 次に、グローバル変数'image'を取得し、そのソースをnumbers[0]のコンテンツに割り当てます。

  3. 次に、キャンバス上の指定された位置にその画像を描画します。

  4. 次に、変数fileNameの値を1ずつインクリメントし、値を「2」にします。

  5. 次に、Y座標の値をインクリメントし、キャンバス上に画像を20ピクセル描画します。描画する画像の位置を20ピクセル下に移動します。

  6. その後、ループの最初に戻り、キャンバス上の最初に描画された画像の位置から20ピクセル下の位置に次の画像（2.png）を描画します。

  7. 変数'fileName'の値が11未満の間、これを継続する必要があります。つまり、最後に描画された画像の下に、新しい画像ごとに10枚の画像を描画する必要があります。

しかし、どういうわけか、私の関数は最初の画像しか描画しません。誰かが私が間違っていることを指摘できますか、そしてどうすればこれを修正できますか？

どうもありがとう。

4

2 に答える 2

0

drawImgのものを取得し、それを独自の関数に押し込むと、これを少しクリーンアップできます:)これで、非同期のものをループからヤンクしたので、ループするimageたびに変数が上書きされることはありません。あなたはfor今もループを使用していますが、これは私には理解しやすいです。

function drawLevelOneElements() {
  // your stuff
  for (var i = 0; i > 5; i++) {
    drawImg(ctx, i, x, y);
    // update x or y and whatever else
  }
}

// put all your image drawing stuff here
function drawImg(ctx, i, x, y) {
  var img = new Image();
  img.src = i + ".png";
  img.onload = function(){
    ctx.drawImage(img,  x, y, 50, 50);
  }
}
于 2012-04-26T19:32:22.713 に答える
0

コードのいくつかのポイントを編集してコメントしました。最も効果的な変更は、変数imageY = imageY+20;を使用するように編集されたことです。imagePositionY

function drawLevelOneElements() {
        /*First, clear the canvas */
        context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height);
        /*This line clears all of the elements that were previously drawn on the canvas. */

        /*Then redraw the game elements */
        drawGameElements();

        /*Draw the elements needed for level 1 (26/04/2012) */
        var fileName = 1;
        var imagePositionX = 20;
        var imagePositionY = 30;
        while(fileName < 11){
            /*Create an array of images here, move to next element of array on each iteration */
            var numbers = new Array();
            /* what is not used is not necessary :)
            numbers[0] = "1.png"
            numbers[1] = "2.png"
            numbers[3] = "3.png"
            numbers[4] = "4.png"
            numbers[5] = "5.png"*/
            image.src = fileName+".png";
            // image.src = numbers[0];
            image.onload = function(){
                context.drawImage(image, imagePositionX, imagePositionY, 50, 50);
            }
            fileName = fileName+1;
            imagePositionY = imagePositionY+20; //before: imageY = imageY+20;
            console.dir(fileName); /* displays in the console- helpful for debugging */
        }
于 2012-04-26T19:35:51.733 に答える