Algorithmus zum Erstellen einer Pyramide mit Quadraten

Question

Ich versuche eine Pyramide mit Quadraten in HTML5 Canvas zu bauen, ich habe eine Algorithm, die halb funktioniert, das einzige Problem ist, dass nach drei Tagen und einigen fehlenden mathematischen Fähigkeiten ich ' Ich konnte die richtige Formel finden.

Hier ist, was ich habe, überprüfen Sie die Code-Kommentare, so dass Sie sehen können, welchen Teil des Algorithmus wir ändern müssen.

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
var W = 1000; var H = 600; 
var side = 16; 

canvas.width = W; 
canvas.height = H; 

     function square(x, y) { 
      ctx.fillStyle = '#66FF00'; 
      ctx.fillRect(x, y, side, side); 
      ctx.strokeStyle = '#000'; 
      ctx.strokeRect(x, y, side, side); 
     } 

     function draw() { 
      ctx.fillRect(0, 0, W, H); 
      ctx.save(); 

      for(var i = 0; i < 30; i++) { 
       for(var j = 0; j < i + 1; j++) { 
        square(
         //Pos X  
         //This is what we have to change to 
         //make it look like a pyramid instead of stairs 
         W/2 - ((side/2) + (j * side)), 


         //Pos Y 
         side * (i + 1) 
        ); 
       } 
      } 

      ctx.restore(); 
     } 

     //STARTS DRAWING 
     draw(); 

Dies ist der Code in jsfiddle arbeiten, damit wir es versuchen:

https://jsfiddle.net/g5spscpu/

Das gewünschte Ergebnis ist:

Nun, würde ich lieben, Wenn mir jemand helfen könnte, brennt mein Gehirn.

Answer 1

Sie müssen sich mit den i Index in der Formel für die X-Position verwenden:

W/2 - ((side/2) + ((j - i/2) * side)) 

siehe https://jsfiddle.net/9esscdkc/