對象的數組循環

嘿，再次，我以前來過這裏。我的問題是，我的任務是使用Rects，lineTo，moveTo等創建一個House的HTML畫布。我創建了一個單獨的JavaScript文件，並將其轉換爲一個要在我的主畫布頁面上調用的對象。對象的數組循環

但是，當我最初創建房子時，它全部都在canvas.js文件中，這使得創建一個循環來填充這個房子的畫布很容易。

我現在要做的就是複製這個循環以5 * 3的方式填充畫布（這將填充我的整個畫布）。我迄今爲止所做的是這樣的;

我怎樣才能把這個代碼塊成一個循環來繪製一個5 * 3網格的房屋？ P.S名稱House是另一個JavaScript文件中的房屋繪圖對象。

 houses = new Array(); 
     //Columns 
     houses.push(new House(0,100,"#ff0000")); 
     houses.push(new House(0,310,"#ff0000")); 
     houses.push(new House(0,520,"#ff0000")); 
     //row1 
     houses.push(new House(160,100,"#ff0000")); 
     houses.push(new House(320,100,"#ff0000")); 
     houses.push(new House(480,100,"#ff0000")); 
     houses.push(new House(640,100,"#ff0000")); 
     //row2 
     houses.push(new House(160,310,"#ff0000")); 
     houses.push(new House(320,310,"#ff0000")); 
     houses.push(new House(480,310,"#ff0000")); 
     houses.push(new House(640,310,"#ff0000")); 
     //row3 
     houses.push(new House(160,520,"#ff0000")); 
     houses.push(new House(320,520,"#ff0000")); 
     houses.push(new House(480,520,"#ff0000")); 
     houses.push(new House(640,520,"#ff0000")); 
    } 

    //this function will draw on the canvas for me!  
    function draw(){ 
     context.fillStyle = 'grey'; 
     context.fillRect(0, 0, canvas.width, canvas.height); 

     for(var i =0; i < houses.length; i+=1){ 
      houses[i].draw(context); 
     } 
    } 

    initialise(); 
    draw(); 
}

我原來的代碼循環之前，我不得不把房子繪圖功能作爲一個對象;

var drawGreen = false; 
for(var i=0; i < 5; i++){ 
    var pX=0+160*i; 

     for(var b=0; b < 5; b++){ 
     var pY=100+210*b; 
      drawHouse(pX,pY,drawGreen); 
      drawGreen = !drawGreen; 
     } 
    } 
};

來源

2013-11-02 Ben Connor Hansell

我的答案是否奏效？ – GameAlchemist

我可以看到它是如何工作的，但我認爲我不明白的是整個創建房子作爲另一個文件中的對象，並調用它而不是在同一個文件中構建房子。 –

如果你能幫忙解釋這一部分，因爲這是我的講座中沒有解釋的部分。 –

您可以使用畫布的平移和縮放來讓您的畫布充滿您將要複製的房屋。我們假設你的繪製都從（0,0）開始，有x> 0，y> 0，並且可以計算drawWidth和drawHeight。
那麼你可以使用像這樣的位置繪製在畫布上（XSHIFT，YSHIFT），大小爲（tgtWidth，tgtHeight）：

function retargetDraw (ctx, drawFunc, drawWidth, drawHeight, 
           xShift, yShift, tgtWidth, tgtHeight) { 

     var needScaling = ((drawWidth != tgtWidth) || (drawHeight != tgtHeight)); 
     ctx.save(); 
     ctx.translate(xShift, yShift); 
     if (needScaling) { 
      ctx.scale(tgtWidth/drawWidth, tgtHeight/drawHeight);     
     } 
     drawFunc(); 
     ctx.restore(); 
    }

的Rq：如果圖像絕不會進行縮放，你可以刪除tgtWidth/tgtHeight，或者你可以使它們可選：

tgtWidth = tgtWidth || drawWidth ; 
tgtHeight = tgtHeight || drawHeight ;

來源

2013-11-03 13:43:50 GameAlchemist

對象的數組循環

回答

相關問題