Контур массива для объекта

Question

Эй, я снова был здесь. Мой вопрос в том, что мне было поручено создать холст-рисунок HTML с использованием дома, Rects, lineTo, moveTo etcc. Я создал дом в отдельный файл JavaScript и превратил его в объект, который будет вызываться на моей главной странице холста.

Однако, когда я изначально создавал дом, все это было в файле canvas.js, что создавало создание петли, чтобы заполнить холст этим домом.

то, что мне нужно сделать, это повторить этот цикл, чтобы заполнить холст домами 5 * 3 способами (это заполнит весь мой холст). Что я сделал до сих пор, так это;

Как я могу превратить этот кусок кода в цикл, чтобы нарисовать дома в сетке 5 * 3? P.S name Дом - это объект рисования дома в другом файле 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; 
     } 
    } 
}; 

Answer 1

Вы можете использовать перевод и масштаб холста, чтобы ваш холст был заполнен домом, который вы будете реплицировать.

Давайте предположим, что ваши розыгрыши начинаются с (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 ;