OpenHarmony开发实战：自定义抽奖转盘（JS）

// 引入CanvasRenderingContext2D对象
import CanvasRenderingContext2D from 'canvas/lib/canvas-rendering-context-2d';
 
export default {
    data: {
        // 圆的半径
        radius: 150,
        // 圆心坐标
        centerX: 300,
        centerY: 300,
        // 起始角度
        startAngle: 0,
        // 结束角度
        endAngle: 2 * Math.PI,
        // 是否在绘制过程中
        isDrawing: false,
        // 当前角度
        currentAngle: 0,
        // 是否停止
        stop: false,
        // 是否重置
        reset: false,
        // 是否开始
        start: false,
        // 中奖索引
        winningIndex: -1,
        // 中奖名单
        winningList: [],
        // 公共颜色
        commonColor: '#ffde33',
        // 中奖颜色
        winningColor: '#ff5858',
        // 文本颜色
        textColor: '#000000',
        // 文本大小
        fontSize: 20,
        // 文本内容
        textContent: '开始',
        // 画笔宽度
        lineWidth: 10,
        // 圆环数量
        circleCount: 8,
        // 圆环颜色数组
        circleColors: ['#ffde33', '#ffb236', '#ff993e', '#ff7745', '#ff5858'],
        // 圆环线条宽度数组
        circleLineWidths: [5, 10, 15, 20, 25],
        // 圆环内半径
        innerRadius: 100,
        // 圆环外半径
        outerRadius: 150,
        // 圆环间隔角度
        angleInterval: 2 * Math.PI / 8,
        // 是否显示中奖信息
        showWinningInfo: false,
        // 中奖信息颜色
        winningInfoColor: '#ff5858',
        // 中奖信息字体大小
        winningInfoFontSize: 30,
        // 中奖信息内容
        winningInfoContent: '恭喜中奖！',
        // 中奖信息x坐标
        winningInfoX: 150,
        // 中奖信息y坐标
        winningInfoY: 100,
        // 是否显示重新开始按钮
        showRestart: false,
        // 重新开始按钮颜色
        restartColor: '#ff5858',
        // 重新开始按钮字体大小
        restartFontSize: 20,
        // 重新开始按钮内容
        restartContent: '重新开始',
        // 重新开始按钮x坐标
        restartX: 150,
        // 重新开始按钮y坐标
        restartY: 150,
    },
    // 绘制方法
    draw() {
        // 获取Canvas上下文
        const ctx = this.$refs.canvas.getContext('2d');
        // 清除画布
        ctx.clearRect(0, 0, 600, 600);
        // 如果没有开始或者停止，则继续绘制
        if (!this.start || this.stop) {
            return;
        }
        // 如果没有重置，则