Kareler ile bir piramit inşa etmek için algoritma

Question

HTML5 Canvas'da kareler kullanarak bir piramit oluşturmaya çalışıyorum, yarım çalışma olan bir algoritm var, tek sorun şu ki üç gün sonra ve bazı matematik yeteneklerim yok Uygun formülü bulabildim.

Elimde ne varsa, kod yorumlarını kontrol edin, böylece algoritmanın hangi bölümünün değişeceğimizi görebilirsiniz.

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(); 

Bu jsfiddle çalışan koddur yüzden deneyebilirsiniz:

https://jsfiddle.net/g5spscpu/

istenen sonuçtur:

Eh, isterdim Birisi bana yardım ederse, beynim yanıyor.

Answer 1

Sen X pozisyonu için formül i endeksi kullanmanız gerekir:

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

bkz İşte burada https://jsfiddle.net/9esscdkc/