Canvas统计图表（多边形，蜘蛛网，渐变色）

    let c = document.getElementById("myc");
    let ctx = c.getContext("2d");

    // 随机值记录
    let randomRes = [0, 0, 0, 0, 0, 0];
    //const randomRes = [3, 0, 0, 0, 0, 0];
    // 颜色值
    let COLOR_INIT = "#737373";
    // 单个梯形高度
    let onceHeight = 30;

    // 声明画布大小，及窗口文档的显示区的高度和宽度，以像素记
    c.width = 600;
    c.height = 600;
    // 将坐标原点移至画布中心
    ctx.translate(c.width/2,c.height/2);
    // r多边形半径，n多边形个数，deg:多边形与夹角的度数，layerCount:多边形层数
    let r=onceHeight, n=6, deg=360/n, layerCount=4;
    // 初始坐标点
    let prevPoint = {x: 0, y: r};
    // 初始渐变色层级点
    let prevLinearPoint = {x: 0, y: 0};
    // 渐变色坐标点记录
    let linearPointArray = [];
    // 指数结果坐标点记录
    let randomResPoint = [];
    // 上一个结果组
    let prevRandomRes = [];
    
    var mmm = ["CB2329", "1853B7", "C3253A", "7C0A20"];
    var mmmmm = 0;
    setInterval(() => {
        mmmmm === mmm.length && (mmmmm = 0);
        console.log(mmm[mmmmm++])
        setResult([getRandom(), getRandom(), getRandom(), getRandom(), getRandom(), getRandom()], ["粒子1", "粒子2", "粒子3", "粒子4", "粒子5", "粒子6"], mmm[mmmmm++]);
    }, 1500)
    

    /**
     * 设置结果
     * @param(randomResArr) array[int] 比例值 0-4
     * @param(textArr) array[string] 文字说明
     * @param(colorHex) string Hex基准颜色
     */
    function setResult(randomResArr, textArr, colorHex) {
        COLOR_INIT = colorHex;
        prevRandomRes = randomRes;
        randomRes = randomResArr;
        var timer = setInterval(() => {
            drawStatistics(textArr);
            console.log("run");
        }, 16);
        // 偷个懒
        setTimeout(() => {
            clearInterval(timer);
        }, 600);
    }

    function drawBg (textArr) {
        r = onceHeight;
        prevPoint = {x: 0, y: r};
        prevLinearPoint = {x: 0, y: 0};
        linearPointArray = [];
        randomResPoint = []; // 指数坐标点记录
        // 多边形线的颜色
        ctx.strokeStyle="#fff";
        // 多边形线的宽度
        ctx.lineWidth=1;
        ctx.globalAlpha = 1;
        ctx.globalCompositeOperation="destination-over";

        // 绘制多个线段
        for(let j=0;j<=layerCount;j++){
            // 恢复初始坐标点
            prevPoint = {x: 0, y: r};
            // 临时坐标变量
            let temporary = {};

            for(let i=1;i<=n;i++){
                let currentLinearPoint = {x: angleDistance(r)*Math.sin(getrad((i*2-1)*(deg/2))), y: angleDistance(r)*Math.cos((i*2-1)*getrad(deg/2))};
                let prevPointTemporary = {x: prevPoint.x, y: prevPoint.y};
                let grd = null;
                
                try {
                    grd = ctx.createLinearGradient(linearPointArray[j-1][i-1].x, linearPointArray[j-1][i-1].y, currentLinearPoint.x, currentLinearPoint.y);
                } catch (err) {
                    grd = ctx.createLinearGradient(0, 0, currentLinearPoint.x, currentLinearPoint.y);
                }

                linearPointArray[j] ? linearPointArray[j].push({x: currentLinearPoint.x, y: currentLinearPoint.y}) : linearPointArray[j] = [{x: currentLinearPoint.x, y: currentLinearPoint.y}];
                
                grd.addColorStop(0, getLightColor(COLOR_INIT, 0.6));
                grd.addColorStop(1, getLightColor(COLOR_INIT, 0.9));
                ctx.fillStyle = grd;
                // 开始路径
                ctx.beginPath();
                ctx.moveTo(0,0);
                ctx.lineTo(prevPoint.x, prevPoint.y);
                prevPoint = {x: r*Math.sin(getrad(i*deg)), y: r*Math.cos(i*getrad(deg))};
                ctx.lineTo(prevPoint.x, prevPoint.y);
                // 结束路径
                ctx.closePath();
                // 绘制线段
                ctx.stroke();
                // 填充
                ctx.fill();

                switch (i) {
                    case 1:
                        if (j === randomRes[0]) {
                            temporary = {index: 1, x: prevPoint.x, y: prevPoint.y};
                            randomResPoint.push(temporary);
                        }
                        if (j === 4) {
                            ctx.beginPath();
                            ctx.fillStyle = "#333";
                            ctx.textBaseline = "top";
                            ctx.textAlign = "center";
                            ctx.fillText(textArr[0], prevPointTemporary.x, prevPointTemporary.y);
                            ctx.closePath();
                        }
                    break;
                    case 2:
                        if (j === randomRes[1]) {
                            temporary = {index: 2, x: prevPoint.x, y: prevPoint.y};
                            randomResPoint.push(temporary);
                        }
                        if (j === 4) {
                            ctx.beginPath();
                            ctx.fillStyle = "#333";
                            ctx.textBaseline = "middle";
                            ctx.textAlign = "left";
                            ctx.fillText(textArr[1], prevPointTemporary.x, prevPointTemporary.y);
                            ctx.closePath();
                        }
                    break;
                    case 3:
                        if (j === randomRes[2]) {
                            temporary = {index: 3, x: prevPoint.x, y: prevPoint.y};
                            randomResPoint.push(temporary);
                        }
                        if (j === 4) {
                            ctx.beginPath();
                            ctx.fillStyle = "#333";
                            ctx.textBaseline = "middle";
                            ctx.textAlign = "left";
                            ctx.fillText(textArr[2], prevPointTemporary.x, prevPointTemporary.y);
                            ctx.closePath();
                        }
                    break;
                    case 4:
                        if (j === randomRes[3]) {
                            temporary = {index: 4, x: prevPoint.x, y: prevPoint.y};
                            randomResPoint.push(temporary);
                        }
                        if (j === 4) {
                            ctx.beginPath();
                            ctx.fillStyle = "#333";
                            ctx.textBaseline = "bottom";
                            ctx.textAlign = "center";
                            ctx.fillText(textArr[3], prevPointTemporary.x, prevPointTemporary.y);
                            ctx.closePath();
                        }
                    break;
                    case 5:
                        if (j === randomRes[4]) {
                            temporary = {index: 5, x: prevPoint.x, y: prevPoint.y};
                            randomResPoint.push(temporary);
                        }
                        if (j === 4) {
                            ctx.beginPath();
                            ctx.fillStyle = "#333";
                            ctx.textBaseline = "middle";
                            ctx.textAlign = "right";
                            ctx.fillText(textArr[4], prevPointTemporary.x, prevPointTemporary.y);
                            ctx.closePath();
                        }
                    break;
                    case 6:
                        if (j === randomRes[5]) {
                            temporary = {index: 6, x: prevPoint.x, y: prevPoint.y};
                            randomResPoint.push(temporary);
                        }
                        if (j === 4) {
                            ctx.beginPath();
                            ctx.fillStyle = "#333";
                            ctx.textBaseline = "middle";
                            ctx.textAlign = "right";
                            ctx.fillText(textArr[5], prevPointTemporary.x, prevPointTemporary.y);
                            ctx.closePath();
                        }
                    break;
                    default :
                }
            }
            // 递增层级半径
            r += onceHeight;
        }
    }

    function drawStatistics(textArr) {
        ctx.clearRect(-c.width / 2, -c.height / 2, c.width * 2, c.height * 2); // 清除画布

        // 画背景
        drawBg (textArr);
        // 画结果图
        let grdRadial=ctx.createRadialGradient(0,0,0,0,0,r);
        grdRadial.addColorStop(0,getLightColor(COLOR_INIT, 0.6));
        grdRadial.addColorStop(1,getDarkColor(COLOR_INIT, 0.3));
        // ctx.translate(c.width/2,c.height/2);
        ctx.globalCompositeOperation="source-over";
        ctx.lineWidth=2;
        ctx.strokeStyle=getLightColor(COLOR_INIT, 0.5);
        ctx.beginPath();
        ctx.fillStyle = grdRadial;
        ctx.globalAlpha = 0.8;
        let result = randomResPoint.sort((a, b) => (a.index - b.index));


        for(let randomIdx=0; randomIdx<result.length; randomIdx++) {
            let currentIncremnet = 0;
            if (prevRandomRes.length) {
                prevRandomRes[randomIdx] += (randomRes[randomIdx] - prevRandomRes[randomIdx]) / 10;
            }

            randomIdx === 0 ? ctx.moveTo(
                prevRandomRes.length ? 0 : result[randomIdx].x,
                prevRandomRes.length ? (prevRandomRes[randomIdx]+1)*onceHeight : result[0].y
            ) : ctx.lineTo(
                prevRandomRes.length ? ((prevRandomRes[randomIdx]+1)*onceHeight)*Math.sin(getrad(randomIdx*deg)) : result[randomIdx].x,
                prevRandomRes.length ? ((prevRandomRes[randomIdx]+1)*onceHeight)*Math.cos(randomIdx*getrad(deg)) : result[randomIdx].y
            );
            
        }
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
    }

    console.log("randomRes", randomRes);
    console.log(randomResPoint);

    // 封装求弧度的方法 度->弧度
    function getrad(deg){
        return deg/180*Math.PI;
    }
    // 封装计算渐变色倾斜角度
    function angleDistance(rAngle) {
        return rAngle*Math.cos(getrad(deg/2));
    }
    // 获取随机指数
    function getRandom() {
        return Math.floor(Math.random() * 5)
    }

    // hex颜色转rgb颜色
    function HexToRgb (str) {
        var r = /^#?[0-9A-F]{6}$/;
        // test方法检查在字符串中是否存在一个模式，如果存在则返回true，否则返回false
        if (!r.test(str)) return window.alert("输入错误的hex");
        // replace替换查找的到的字符串
        str = str.replace("#", "");
        // match得到查询数组
        var hxs = str.match(/../g);
        // alert('bf:'+hxs)
        for (var i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16);
        // alert(parseInt(80, 16))
        // console.log(hxs);
        return hxs;
    }
    // GRB颜色转Hex颜色
    function RgbToHex (a, b, c) {
        var r = /^d{1,3}$/;
        if (!r.test(a) || !r.test(b) || !r.test(c)) return window.alert("输入错误的rgb颜色值");
        var hexs = [a.toString(16), b.toString(16), c.toString(16)];
        for (var i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = "0" + hexs[i];
        return "#" + hexs.join("");
    }

    // 得到hex颜色值为color的加深颜色值，level为加深的程度，限0-1之间
    function getDarkColor(color, level) {
        var r = /^#?[0-9A-F]{6}$/;
        if (!r.test(color)) return window.alert("输入错误的hex颜色值");
        var rgbc = this.HexToRgb(color);
        // floor 向下取整
        for (var i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level));
        return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
    }
    // 得到hex颜色值为color的减淡颜色值，level为加深的程度，限0-1之间
    function getLightColor(color, level) {
        var r = /^#?[0-9A-F]{6}$/;
        if (!r.test(color)) return window.alert("输入错误的hex颜色值");
        var rgbc = this.HexToRgb(color);
        for (var i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]);
        return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
    }