如何利用canvas构建百分比刻度槽

废话不多说，先上效果图：

本来按照网上找到的方法进行绘制的时候，发现要先画一个外圆，然后再画一个内圆。。。（此处省略），尝试过一次后发现直接画线即可。

分享一下自己的代码

initCanvas(canvas){
            //当前视口宽度
            let nowClientWidth = document.documentElement.clientWidth;
            // 换算方法
            let nowSize = function (val, initWidth = 1920) {
                return val * (nowClientWidth / initWidth);
            };
            var canvas = document.getElementById(canvas);
            var c_width = canvas.parentNode.offsetWidth;
            var c_height = canvas.parentNode.offsetHeight;
            canvas.width = c_width;
            canvas.height = c_height;
            var context = canvas.getContext('2d');
            var color = "";// 进度条、文字样式
            context.clearRect(0, 0, c_width, c_height);
            context.beginPath();
            context.strokeStyle = '#ddd';
            context.lineCap = 'round';
            context.closePath();
            context.fill();
            context.lineWidth = nowSize(10)//绘制内圆的线宽度
            context.beginPath();
            // 绘制一个中心点为（c_width/2, c_height/2），半径为c_height/2-5不与外圆重叠，
            // 起始点-(Math.PI/2)，终止点为((Math.PI*2)*cur)-Math.PI/2的 整圆cur为每一次绘制的距离
            if(c_height<c_width){
                context.arc(c_width/2, c_height/2, c_height/2-15, (Math.PI * 0.7), (Math.PI * 0.3 ), false);
            } else{
                context.arc(c_width/2, c_height/2, c_width/2-15, (Math.PI * 0.7), (Math.PI * 0.3 ), false);
            }
            context.stroke();
        },
        drawCanvas(canvas,text,val){
            //当前视口宽度
            let nowClientWidth = document.documentElement.clientWidth;
            // 换算方法
            let nowSize = function (val, initWidth = 1920) {
                return val * (nowClientWidth / initWidth);
            };
            var canvas = document.getElementById(canvas);
            var context = canvas.getContext('2d');
            var c_width = canvas.parentNode.offsetWidth;
            var c_height = canvas.parentNode.offsetHeight;
            context.beginPath();
            context.strokeStyle = "rgb(255,191,83)";
            context.lineCap = 'round';
            context.closePath();
            context.fill();
            context.lineWidth = nowSize(10);//绘制内圆的线宽度
            context.beginPath();
            // 绘制一个中心点为（c_width/2, c_height/2），半径为c_height/2-5不与外圆重叠，
            // 起始点-(Math.PI/2)，终止点为((Math.PI*2)*cur)-Math.PI/2的 整圆cur为每一次绘制的距离
            if(c_height<c_width){
                context.arc(c_width/2, c_height/2, c_height/2-15, -(Math.PI * 1.3), (Math.PI * 1.6 * val )-(Math.PI * 1.3), false);
            } else {
                context.arc(c_width/2, c_height/2, c_width/2-15, -(Math.PI * 1.3), (Math.PI * 1.6 * val )-(Math.PI * 1.3), false);
            }
            context.stroke();
            context.font = "0.6vw Arial";  // 字体大小，样式
            context.fillStyle = "white";  // 颜色
            context.textAlign = 'center';  // 位置
            context.textBaseline = 'middle';
            // context.moveTo(c_width/2, c_height/2);  // 文字填充位置
            context.fillText(val*100+"%", c_width/2, c_height/2-nowSize(10));
            context.fillText(text, c_width/2, c_height/2+nowSize(10));
        }

其中canvas参数是画布的id值，需要先构建一条背景线，也就是initCanvas()，然后再构建百分比线drawCanvas()，其中text是文本信息，而val是占比数（小数的形式）。

获取更多前端组件代码，可以关注我！