Javascript 需要帮助在画布上的矩形内绘制多个球吗

我需要在一个矩形内画多个球。我有一个矩形和4个信息。矩形的宽度和高度。。每条线的球数和线数。比如说，我必须在同一条线上画4个球。开始的角落（我能做到），但我不知道如何绘制超过2个球，例如：如果我有3个球，我需要画2个角落和1在中间，如果我有4个球…角2个，中间2个。我有一个想法，认为矩形是一个矩阵，但没有运气

例如，如果需要在直线上绘制n个龙珠，则可以使用n+1除以长度以获得球中心之间的间距，或者如果希望在开始和结束时有不同的偏移，则可以除以（宽度-2*偏移）/（n-1）

const canvas=document.getElementById（“canvas”）；
const ctx=canvas.getContext（“2d”）；
类矩形{
构造器（x、y、宽度、高度）{
这个.x=x；
这个。y=y；
这个。宽度=宽度；
this.heght=heght；
}
}
班级圈子{
构造函数（x，y，半径）{
这个.x=x；
这个。y=y；
这个半径=半径；
}
}
课堂场景
{
构造函数（）{
此参数为.items=[]；
}
清除（）{
此参数为.items=[]；
}
添加（项目）{
此.items.push（item）；
}
抽签（ctx）{
对于（让此.items中的项目）{
if（项目实例OF Rect）{
ctx.beginPath（）；
ctx.rect（项.x，项.y，项.width，项.heght）；
ctx.stroke（）；
}else if（圆圈的项目实例）{
ctx.beginPath（）；
ctx.弧（项目.x，项目.y，项目.radius，0,2*Math.PI）；
ctx.stroke（）；
}
}
}
}
const scene=新场景（）；
场景。清除（）；
添加（新的Rect（0，0，300，100））；
设n=5；
设偏移量=30；
设间距=（（300-2*偏移量）/（n-1））；
for（设i=0；i

如果您需要在直线上绘制例如n个龙珠，那么您可以使用n+1分割长度以获得球中心之间的间距，或者如果您希望在开始和结束时有不同的偏移，那么您可以分割（宽度-2*偏移）/（n-1）

const canvas=document.getElementById（“canvas”）；
const ctx=canvas.getContext（“2d”）；
类矩形{
构造器（x、y、宽度、高度）{
这个.x=x；
这个。y=y；
这个。宽度=宽度；
this.heght=heght；
}
}
班级圈子{
构造函数（x，y，半径）{
这个.x=x；
这个。y=y；
这个半径=半径；
}
}
课堂场景
{
构造函数（）{
此参数为.items=[]；
}
清除（）{
此参数为.items=[]；
}
添加（项目）{
此.items.push（item）；
}
抽签（ctx）{
对于（让此.items中的项目）{
if（项目实例OF Rect）{
ctx.beginPath（）；
ctx.rect（项.x，项.y，项.width，项.heght）；
ctx.stroke（）；
}else if（圆圈的项目实例）{
ctx.beginPath（）；
ctx.弧（项目.x，项目.y，项目.radius，0,2*Math.PI）；
ctx.stroke（）；
}
}
}
}
const scene=新场景（）；
场景。清除（）；
添加（新的Rect（0，0，300，100））；
设n=5；
设偏移量=30；
设间距=（（300-2*偏移量）/（n-1））；
for（设i=0；i

我喜欢它，现在正在使用它。。。虽然我很难在平局中定位球。。。看看我到目前为止得到了什么，如果你有更多的时间来帮我一把我喜欢它，我现在正在使用它。。。虽然我很难在平局中定位球。。。看看我到目前为止得到了什么，如果您有更多的时间来帮助我开始编码，请分享您到目前为止可以编码的内容，如果您遇到任何问题，我们将帮助您，但我们无法为您编写代码。开始编写代码，分享到目前为止您可以编写的代码，如果您遇到任何问题，我们将帮助您，但我们无法为您编写代码。函数zoomedX（number）{return Math.floor（（number-wx）*scale+sx）；}函数zoomedY（number）{return Math.floor（（number-wy）*scale+sy）；}您好，您需要考虑矩形的位置，类似于：new Circle（rect.x+i*spacing+offet，rect.y+y*spacingY+offset，radius），其中rect.x，rect.y是要将圆居中的矩形的位置。函数zoomedX（number）{return Math.floor（（number-wx）*scale+sx）；}函数zoomedY（number）{return Math.floor（（number-wy）*scale+sy）；}您好，您需要考虑矩形的位置，例如：新圆（rect.x+i*间距+offet，rect.y+y*间距+偏移，半径），其中rect.x，rect.y是要将圆居中的矩形的位置。

    function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);

        scene.clear();

        context.beginPath();
        context.strokeRect(zoomedX(0), zoomedY(0), zoomed(width), zoomed(height));
        context.strokeRect(zoomedX(55), zoomedY(55), zoomed(width-10), zoomed(height-10));
        context.strokeRect(zoomedX(60), zoomedY(60), zoomed(width-20), zoomed(height-20));
        context.closePath();

        let radius    = 8;
        let n         = 3;
        let lines     = 3;
        let offset    = 68;
        let offsetY   = 68;
        let spacing   = ((width - 2 * offset ) / (n - 1));
        let spacingY  = ((height - 2 * offset ) / (lines - 1));

        for (let i = 0; i < n; i++) {
            for(let j = 0; j < lines ;j++){
                scene.add(new Circle(i * spacing + offset, j * spacingY + offset, radius))
            }
        }

        scene.draw(context);
    }