如图我现在已经实现了等分扇形
如何将一等奖,二等奖等字固定在等分扇形的中心呢。。。
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; i++) {
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();
}
};