as shown in the picture, I have now achieved the equipartition sector
how to fix the words such as the first prize and the second prize in the center of the equal fan.
export default {
data() {
return {
awrad: [
{
name: "1"
},
{
name: "2"
},
{
name: "3"
},
{
name: "4"
}
]
};
},
methods: {
drawCircle() {
let cavans = document.getElementById("cavans");
if (!cavans.getContext) {
return;
};
let ctx = cavans.getContext("2d"); //
// 150
ctx.beginPath();
ctx.arc(150, 150, 150, 0, 2 * Math.PI);
ctx.stroke();
ctx.closePath();
ctx.save();
let x = 150; // X
let y = 150; // Y
let r = 150; //
let temp = -90; // -90
for (let i = 0; i < this.awrad.length; iPP) {
let award = this.awrad[i];
ctx.beginPath(); //
ctx.moveTo(150, 150); //
let baseAngle = Math.PI / 180; //
let angle = 360 / this.awrad.length; //
let startAngle = temp * baseAngle; //
let endAngle = (startAngle + temp) * baseAngle; //
ctx.arc(x, y, r, startAngle, endAngle, false);
temp += angle;
ctx.stroke();
ctx.closePath();
ctx.save();
let textX = r + Math.cos(angle + temp) * r;
let textY = r + Math.sin(angle + temp) * r;
console.log(textX, textY);
ctx.fillText(award.name, textX, textY);
}
}
},
mounted() {
this.drawCircle();
}
};