如何使用画布在javascript中拆分圆圈数组以显示一半圆圈中的数字和另一半圆圈中的字母

如何解决如何使用画布在javascript中拆分圆圈数组以显示一半圆圈中的数字和另一半圆圈中的字母

我有一个圆圈数组，想要 3 个圆圈来显示字母，例如 a、b、c。另一半在圆圈中间显示数字。我目前在所有圈子中都显示了数字。我尝试在我的班级 Circle 中添加另一个圆圈，但随后添加的圆圈发生了碰撞。有没有办法只将我的数组分成一半的数字和一半的字母？这是我的代码：

let circleText = 0;


class Circle {
    constructor (x,y,radius,text) {
        this.x = x;
       this.y = y;
       this.radius = radius;
       this.text = text;
 }

draw() {

    //circle with numbers
    context.beginPath();
    context.strokeStyle = this.color

    context.fillStyle = 'black';
    context.textAlign = "center"
    context.textBaseline = "middle"
    context.font = "20px Arial";

    context.fillText(this.text,this.x,this.y)
    context.fill();
    context.arc(this.x,this.y,this.radius,Math.PI * 2,true);
    context.stroke();
    context.closePath();

    //draw mouse
    context.beginPath();
    context.arc(mouse.x,mouse.y,12,Math.PI *2,true);
    context.fillStyle ='gold';
    context.fill();
    context.closePath();
}

}

函数初始化（）{ 圆圈 = [];

var radius = 50;

let overlapping = false;

//end of added collision code

let numberofCircles = 6;

//add collision code
let protection = 1000;
let counter = 0;

let randomNumber = function(min,max) {
    var result = Math.random() * (max - min) + min
    return result
}


while (circles.length < numberofCircles && counter < protection) {
    
    let circ1 = {
        radius: radius,x: randomNumber(radius,(canvas.width - radius)),y: randomNumber(radius,(canvas.width - radius))
        
    };
    overlapping = false;
    
    for(let i = 0; i < circles.length; i++) {
        
        let prevIoUsCircle = circles[i];
        let dx = circ1.x - prevIoUsCircle.x;
        let dy = circ1.y - prevIoUsCircle.y;
        let distance = Math.sqrt(dx*dx + dy*dy);
        if(distance < (circ1.radius + prevIoUsCircle.radius + 10)) {
            //they are colliding
            overlapping = true;
            break;
        }

    } //end of nested for loop
    if(!overlapping) {
        circles.push(new Circle(circ1.x,circ1.y,circ1.radius,circleText++));
        
    }
} 

}

函数动画（）{ requestAnimationFrame(animate);

    context.clearRect(0,canvas.width,canvas.height);

    for(let j = 0; j < circles.length; j++) {
        circles[j].draw();
    }
}

解决方法

目前您直接使用变量 circleText 作为所有圈子的标签。

因此，每次实例化一个新的 Circle 时，它​​都会获得 circleText 在那一刻的任何值。

if(!overlapping) {
    circles.push(new Circle(circ1.x,circ1.y,circ1.radius,circleText++));
}

你可以做的是创建一个你想要的圆圈大小的数组，并用它来存储每个圆圈的标签。

let numberofCircles = 6;
let labels=["0","1","2","a","b","c"];

现在您只需要稍微修改实例化就可以了：

    if (!overlapping) {
        circles.push(new Circle(circ1.x,labels[circleText]));
        circleText++;
    }