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

Question

我有一个圆圈数组，想要 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, 0, Math.PI * 2, true);
    context.stroke();
    context.closePath();

    //draw mouse
    context.beginPath();
    context.arc(mouse.x, mouse.y, 12, 0, 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(动画);

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

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

Answer 1

目前，您直接使用变量 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, circ1.y, circ1.radius, labels[circleText]));
        circleText++;
    }