canvas -半圆环进速条

参考：进度条
js

var _page = {
        scoreCanvas(id ,progress) {
            // canvas进度条
            var canvas = document.getElementById(id);
            //获取屏幕的宽度
            var  clientWidth = api.winWidth;
            //根据设计图中的canvas画布的占比进行设置
            var canvasWidth = Math.floor(clientWidth*122/375);
            canvas.setAttribute('width',canvasWidth * 4 +'px');
            canvas.setAttribute('height',canvasWidth * 4 +'px');
            //translate方法也可以直接传入像素点坐标

            var ctx = canvas.getContext("2d"),
                percent = progress,  //最终百分比
                circleX = canvas.width / 2 ,  //中心x坐标
                circleY = canvas.height / 2,  //中心y坐标
                lineWidth = canvas.width * 12 / 375,  //圆形线条的宽度
                radius = canvas.width / 2 - lineWidth , //圆环半径
                fontSize = clientWidth * 4 * 32 / 375; //字体大小

            //画圆
            function circle(cx, cy, r) {
                ctx.beginPath();
                //ctx.moveTo(cx + r, cy);
                ctx.lineWidth = lineWidth;
                ctx.strokeStyle = '#eee';
                ctx.arc(cx, cy, r, Math.PI * 5/6, Math.PI * 1/6);
                ctx.stroke();
            }
            //画弧线
            function sector(cx, cy, r, startAngle, endAngle, anti) {
                ctx.beginPath();
                //ctx.moveTo(cx, cy + r); // 从圆形底部开始画
                ctx.lineWidth = lineWidth;

                // 渐变色 - 可自定义
                var linGrad = ctx.createLinearGradient(
                    circleX-radius-lineWidth, circleY, circleX+radius+lineWidth, circleY
                );
                linGrad.addColorStop(0.0, '#F3DBC3');
                //linGrad.addColorStop(0.5, '#9bc4eb');
                linGrad.addColorStop(1.0, '#EDD4BD');
                ctx.strokeStyle = linGrad;

                //圆弧两端的样式
                ctx.lineCap = 'round';

                //圆弧
                ctx.arc(
                    cx, cy, r,
                    (Math.PI*5/6),
                    (Math.PI*5/6) + endAngle/100 * (Math.PI*4/3),
                    false
                );
                ctx.stroke();
            }

            //刷新
            function loading() {
                if (process >= percent) {
                    clearInterval(circleLoading);
                }

                //清除canvas内容
                ctx.clearRect(0, 0, circleX * 2, circleY * 2);

                //中间的字
                ctx.font = fontSize + 'px April';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillStyle = '#F8D2B0';
                ctx.fillText(parseFloat(process).toFixed(0), circleX, clientWidth * 4 * 83 / 375);

                //圆形
                circle(circleX, circleY, radius);
                //圆弧
                sector(circleX, circleY, radius, Math.PI*5/6, process);

                //控制结束时动画的速度
                /*if (process / percent > 0.90) {
                    process += 0.30;
                } else if (process / percent > 0.80) {
                    process += 0.55;
                } else if (process / percent > 0.70) {
                    process += 0.75;
                } else {
                    process += 1.0;
                }*/
                process += 0.5;             
                main.lineRotate += 1.325;
            }

            var process = 0.0;  //进度
            main.lineRotate = -165.0
            var circleLoading = window.setInterval(function () {
                loading();
            }, 20);

        }
    };

    _page.scoreCanvas('canvas',100);

html

<div class="ui-score__canvas">
            <div class="ui-score__boxLine" :style="{'transform':'rotate('+ lineRotate +'deg)'}"></div>
            <canvas id="canvas">
                <p>抱歉，您的浏览器不支持canvas</p>
            </canvas>
        </div>

css

#c                     anvas {
    width: 2.44rem;
    height: 2.44rem;
}
.ui-score__canvas {
    position: absolute;
    top: .30rem;
    left: 2.52rem;
    width: 2.44rem;
    height: 2.44rem;
    margin: auto;
    z-index: 999;
}

效果图