大转盘cavans中怎么将文字固定在等分的区域内?

clipboard.png
如图我现在已经实现了等分扇形

如何将一等奖,二等奖等字固定在等分扇形的中心呢。。。

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();
    }
};
阅读 1.6k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题