canvas圆形百分比进度条

先上效果

image.png

再贴代码

    /**
     * 领取进度条
     * @param {Int} num 
     * @param {String} elId 
     */
    function canvasPercentage(num, elId) {
        // 计算百分比
        var percentage = parseInt(num) / 100 * 80;
        // 获取元素
        var divEl = document.getElementById(elId);
        divEl.style = 'text-align: center;width:100%;heigth:50px;position: relative;';
        divEl.innerHTML = '';
        // 创建canvas
        var canvasEl = document.createElement('canvas');
        canvasEl.style.transform = 'rotate(-143deg)';
        canvasEl.height = 50;
        canvasEl.width = 50;
        divEl.appendChild(canvasEl);
        // 创建h3
        var h3El = document.createElement('h3');
        h3El.innerHTML = '已抢';
        h3El.style = 'color:#f23030;position: absolute;width: 100%;top: 18px;line-height: 0;font-size: 11px;';
        divEl.appendChild(h3El);
        // 创建small
        var smallEl = document.createElement('small');
        smallEl.innerHTML = '0%';
        smallEl.style = 'color:#f23030;position: absolute;display: block;width: 100%;text-align: center;top: 25px;left: 0px;';
        divEl.appendChild(smallEl);
        // 获取canvas 上下文
        var ctx = canvasEl.getContext('2d');
        // Canvas中心点x轴坐标
        var centerX = canvasEl.width / 2;
        // Canvas中心点y轴坐标
        var centerY = canvasEl.height / 2;
        // 将360度分成100份，那么每一份就是rad度
        var rad = Math.PI * 2 / 100;
        // 起点
        var speed = 0;
        var drawCircle = function (ctxs, percent) {
            // 画白色的静态圆
            ctxs.save();
            ctxs.strokeStyle = "#ffb8b8";
            ctxs.lineWidth = 4;
            ctxs.beginPath();
            ctxs.arc(centerX, centerY, 20, -1.5707963267948966, 3.4557519189487547, false);
            ctxs.stroke();
            ctxs.closePath();
            ctxs.restore();
            // 画进度环
            ctxs.save();
            ctxs.strokeStyle = "#f23030";
            ctxs.lineWidth = 4;
            ctxs.beginPath();
            ctxs.arc(centerX, centerY, 20, -Math.PI / 2, -Math.PI / 2 + percent * rad, false)
            ctxs.stroke();
            ctxs.closePath();
            ctxs.restore();
        }
        var animate = function () {
            window.requestAnimationFrame(function () {
                if (speed < percentage) {
                    animate();
                }
            });
            ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
            speed += 1;
            drawCircle(ctx, speed);
        }
        var countDown = function () {
            var i = 0;
            count[elId] = setInterval(function () {
                if (i <= num) {
                    document.getElementById(elId).children[2].innerHTML = i + '%';
                    // this.smallEl.innerHTML = i + '%';
                    i++;
                } else {
                    clearInterval(count[elId]);
                }
            }, 16);
        }
        countDown();
        animate();
    }