弧形进度条，弧形百分比

sogooday

已于 2023-10-12 08:42:49 修改

阅读量202

点赞数

文章标签： canvsa 进度条进度弧度

于 2023-10-10 17:01:24 首次发布

本文链接：https://blog.csdn.net/huhudeni/article/details/133750994

版权

要帮助同事写一个弧度的进度条，进度条顶部有一个小圆，具体如下

需要指出的是，我们canvas的绘制是需要弧度，所以我们代码中使用角度，等待绘制的时候再砖话为弧度值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <input type="range" id="cowbell" name="cowbell" min="0" max="100" value="50" step="1">
        <label for="cowbell">拖拽角度变化</label>
    </div>
    <canvas id="canvas"></canvas>

    <script>
       
        const cowbell = document.getElementById("cowbell");
        cowbell.addEventListener("input", (a, c) => {
            console.log(cowbell.value)
            draw(cowbell.value)
        });


        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        canvas.width = 500;
        canvas.height = 500;
        let conterw = canvas.width / 2;//弧度的中心坐标
        let conterh = canvas.height / 2;//弧度的中心坐标
        let sAngle = 150;//其实角度
        let eAngle = 390;//结束角度
        let nAngle = 100;//以sAngle为基准的角度
        let leng = 100;//半径

        draw(50)

        //绘制百分比进度
        function draw(percentage) {
            //清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            //结束角度 - 起始角度 = 中间区域的范围值  
            //中间区域的范围值 / 100 *当前进度百分比
            //得到百分比下的角度值
            nAngle = (eAngle - sAngle) / 100 * percentage;
            //绘制一个弧度进度条底色
            drawArc(sAngle, eAngle, eAngle, conterw, conterh, '#e1e8ee')
            //绘制一个弧度有进度的
            drawArc(sAngle, eAngle, nAngle, conterw, conterh, '#6f78cc')
            //绘制圆的坐标
            let { x, y } = getArcFillXY(sAngle, eAngle, leng, conterw, conterh, nAngle)
            //绘制圆
            drawArcFill(x, y);
        }
 
        //绘制弧度
        function drawArc(sAngle, eAngle, nAngle, conterw, conterh, strokeStyle = '#e1e8ee') {
            ctx.beginPath();
            //在基础sAngle上加上差量的角度  
            nAngle += sAngle;
            //控制最小的角度
            if (sAngle > nAngle) {
                nAngle = sAngle;
            }
            //  控制最大的角度
            if (eAngle < nAngle) {
                nAngle = eAngle;
            }
            //绘制角度
            ctx.arc(conterw, conterh, leng, rad(sAngle), rad(nAngle), false);
            ctx.strokeStyle = strokeStyle;
            ctx.lineWidth = 5;
            ctx.stroke();
            ctx.closePath();
        }
        function drawArcFill(x, y) {
            //绘制一个半径为5得红色圆形
            ctx.beginPath();
            ctx.arc(x, y, 5, 0, 2 * Math.PI, false);
            ctx.fillStyle = 'red';
            ctx.fill();
            ctx.closePath();
        }
        //将上述的圆形放在进度条的头部,随着弧形的角度一起变化 
        /**
         * 
         */
        function getArcFillXY(sAngle, eAngle, leng, conterw, conterh, nAngle) {
            //半径是
            let x = conterw - leng;
            let y = conterh;
            //在基础sAngle上加上差量的角度
            nAngle += sAngle
            //控制最小的角度
            if (sAngle > nAngle) {
                nAngle = sAngle;
            }
            //  控制最大的角度
            if (eAngle < nAngle) {
                nAngle = eAngle;
            }
            //差值角度
            let cAngle = nAngle - sAngle;
            x = Math.cos(rad(nAngle)) * leng + conterw;
            y = Math.sin(rad(nAngle)) * leng + conterh;
            return {
                x, y
            }
        }
        //度数转化为弧度得方法
        function rad(sAngle) {
            return sAngle * Math.PI / 180;
        }


    </script>
</body>

</html>