技術標籤：canvashtmljshtml5前端

廢話不多說，先上效果圖：

本來按照網上找到的方法進行繪製的時候，發現要先畫一個外圓，然後再畫一個內圓。。。（此處省略），嘗試過一次後發現直接畫線即可。

分享一下自己的程式碼

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是佔比數（小數的形式）。

獲取更多前端元件程式碼，可以關注我！