小程序canvas实现多边形，雷达图，蜘蛛图

实现样例，可生成任意多边形

代码实现

/*
  @description: 多边形，雷达图，蜘蛛图canvas组件
  @author: hhd (2021-12-17)
  @使用方式：
    导入： import myCanvas from '/common/myCanvas';
    雷达图数据配置：
        const configData = {
          canvasW: 700, // canvas宽
          canvasH: 600, // canvas高
          canvasRadius: 200, // 外框半径
          canvasLineWidth: 2, // 外框线宽
          rBorderColor: '#999', // 外框颜色
          rBorderBg: '#e8f9f0', // 外框背景颜色
          rLinklineColor: '#999', // 连接线颜色
          titleFont: 26, // 字体大小
          titleColor: '#999', // 字体颜色
          radarData : [  // 雷达图配置 radarData数量 = 雷达图数量
            {
              color : '#63d798', // 雷达图1颜色
              lineWidth: 2, // 雷达图1线宽
              isFull: false, // 是否填充背景
              mData : [ // mData数量 = 雷达图边数
                { title: "诚信意愿", score: 10, fullScore: 10},
                { title: "合规履约", score: 9, fullScore: 10 },
                { title: "经营能力", score: 6, fullScore: 10 },
              ]
            },
            {
              color : '#dd3239', // 雷达图2颜色
              lineWidth: 2, // 雷达图2线宽
              isFull: false, // 是否填充背景
              mData : [
                { title: "诚信意愿", score: 10, fullScore: 10},
                { title: "合规履约", score: 1, fullScore: 10 },
                { title: "经营能力", score: 2, fullScore: 10 },
              ]
            },
          ]
        }
    调用： myCanvas.radar(configData)
 */


var myCanvas = {
    

    radar(configData) {
   
        const ctx = wx.createCanvasContext("canvas");
        const canvasW = configData.canvasW / this.getRatio(); // canvas宽
        const canvasH = configData.canvasH / this.getRatio(); //canvas高
        const L_RADIUS = configData.canvasRadius / this.getRatio(); // 大圆半径
        const LINE_WIDTH = configData.canvasLineWidth / this.getRatio(); // 线宽
        const rBorderColor = configData.renderBorder; // 外框颜色
        const rBorderBg = configData.rBorderBg; // 外框背景色
        const rLinklineColor = configData.rLinklineColor; // 连接线颜色
        const titleFont = configData.titleFont; // 字体大小
        const titleColor = configData.titleColor; // 字体大小

        //清空画布
        ctx.clearRect(0, 0, canvasW, canvasH);
        ctx.save();
        // 重新映射 canvas的 (0, 0)，映射的结果是让canvas的坐标原点位于 canvas的中心位
        ctx.translate(canvasW / 2, canvasH / 2);
        // 多边形的边数
        const mCount = configData.radarData[0].mData.length;
        // 需要旋转多少度，才能将多边形旋转到底边平行于 X轴，奇多边形才需要，偶多边形不需要旋转
        const sAngle = (90 / mCount / 180) * Math.PI;
        let rotateAngle = mCount % 2 === 0 ? 0 : sAngle * (mCount % 4 === 3 ? -1 : 1); //底边平行x轴
        // 多边形外接圆半径
        const lCoordinates = this.getCoordinatesByRadius(L_RADIUS,mCount,-rotateAngle);
        // 绘制边框线
        this.renderBorder(ctx,rBorderColor