Javascript 在金字塔图案中绘制圆的方法

我想在HTML画布上以金字塔模式绘制圆形球

像这样：

用小提琴向我展示算法：

var canvas=document.getElementById（'canvas'）；
画布宽度=400；
画布高度=400；
var ctx=canvas.getContext（'2d'）；
var=[]；
var ballsLength=15；
var Ball=函数（）{
这个.x=0；
这个。y=0；
这个半径=10；
};
Ball.prototype.draw=函数（x，y）{
这个.x=x；
这个。y=y；
ctx.fillStyle='#333'；
ctx.beginPath（）；
ctx.arc（this.x，this.y，this.radius，0，Math.PI*2，true）；
ctx.fill（）；
ctx.closePath（）；
};
init（）；
函数init（）{
对于（var i=0；i对于（var i=1；i=1&&i=6&&i=10&&i=13&&i，下面的实时演示展示了如何使用一点三角法将任意数量的球打包到棱锥体中。要更改棱锥体中的层数（从而更改球数），请编辑
NUM\u ROWS
变量

完成后的外观如下所示：


现场演示：


var canvas=document.getElementById（'canvas'）；
画布宽度=400；
画布高度=400；
var ctx=canvas.getContext（'2d'）；
var=[]；
var ballsLength=15；
var Ball=函数（）{
这个.x=0；
这个。y=0；
这个半径=10；
};
Ball.prototype.draw=函数（x，y）{
这个.x=x；
这个。y=y；
ctx.fillStyle='#333'；
ctx.beginPath（）；
ctx.arc（this.x，this.y，this.radius，0，Math.PI*2，true）；
ctx.fill（）；
ctx.closePath（）；
};
init（）；
函数init（）{
对于（var i=0；i对于（var i=1；i像这样的台球金字塔总是由一些已知的事实组成：


每一行总是比前一行多包含一个球
它是一个等边等角三角形（英语中是sp？），这意味着下一行始终以偏移60°开始

所以我们可以做一个向量（台球游戏中的所有其他东西都会涉及向量，为什么不呢！：）作为下一行起点的方向，如下所示：

var deg60 = -60 / 180 * Math.PI;    // -60°, up-right direction
var v = {
    x: radius * Math.cos(deg60),
    y: radius * Math.sin(deg60)
  }

然后算法将是（由球的总数驱动）：


第一行的最大限制为1
绘制球，直到达到行的最大限制

然后，将一个添加到最大限制
重置行计数
将位置移动到最后一行的开头+向量


重复此步骤，直到达到球数

结果:


例子

var ctx=c.getContext（“2d”），
半径=9，//球半径
deg=-60/180*Math.PI，//行开始方向-60°
balls=15，//要绘制的球数
Drawed=0，//计算在当前行上绘制的球数
rowLen=1，//当前行的最大长度（first=1）
x=150，//起点
y=140，
cx=150，cy=140，//复制起点+偏移量
v={//向量
x：半径*2*数学坐标（度），
y：半径*2*数学正弦（度）
},
我
对于（i=0；i

简单明了谢谢你的回答，但@K3N为我提供了更好的方法。“等角度”=-非常接近！我完全明白你的意思。@rockerest lol，是的，我一辈子都想不起来了。谢谢：）谢谢你，@K3N。