javascript - 用正方形构建金字塔的算法

Question

我正在尝试在 HTML5 Canvas 中使用正方形构建一个金字塔，我的算法只工作了一半，唯一的问题是三天后我缺乏一些数学能力，但我无法找到合适的公式。

这是我所拥有的，请查看代码注释，以便您了解我们必须更改算法的哪一部分。

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

这是在 jsfiddle 中运行的代码，所以我们可以尝试一下:

https://jsfiddle.net/g5spscpu/

期望的结果是:

好吧，如果有人能帮助我，我会很高兴，我的大脑在燃烧。

Answer 1

您需要在 X 位置的公式中使用 i 索引:

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

参见 https://jsfiddle.net/9esscdkc/