• 弧形进度条，弧形百分比

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

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

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9.  
    10. <body>
    11.     <div>
    12.         <input type="range" id="cowbell" name="cowbell" min="0" max="100" value="50" step="1">
    13.         <label for="cowbell">拖拽角度变化label>
    14.     div>
    15.     <canvas id="canvas">canvas>
    16.  
    17.     <script>
    18.        
    19.         const cowbell = document.getElementById("cowbell");
    20.         cowbell.addEventListener("input", (a, c) => {
    21.             console.log(cowbell.value)
    22.             draw(cowbell.value)
    23.         });
    24.  
    25.  
    26.         let canvas = document.getElementById('canvas');
    27.         let ctx = canvas.getContext('2d');
    28.         canvas.width = 500;
    29.         canvas.height = 500;
    30.         let conterw = canvas.width / 2;//弧度的中心坐标
    31.         let conterh = canvas.height / 2;//弧度的中心坐标
    32.         let sAngle = 150;//其实角度
    33.         let eAngle = 390;//结束角度
    34.         let nAngle = 100;//以sAngle为基准的角度
    35.         let leng = 100;//半径
    36.  
    37.         draw(50)
    38.  
    39.         //绘制百分比进度
    40.         function draw(percentage) {
    41.             //清空画布
    42.             ctx.clearRect(0, 0, canvas.width, canvas.height);
    43.             //结束角度 - 起始角度 = 中间区域的范围值  
    44.             //中间区域的范围值 / 100 *当前进度百分比
    45.             //得到百分比下的角度值
    46.             nAngle = (eAngle - sAngle) / 100 * percentage;
    47.             //绘制一个弧度进度条底色
    48.             drawArc(sAngle, eAngle, eAngle, conterw, conterh, '#e1e8ee')
    49.             //绘制一个弧度有进度的
    50.             drawArc(sAngle, eAngle, nAngle, conterw, conterh, '#6f78cc')
    51.             //绘制圆的坐标
    52.             let { x, y } = getArcFillXY(sAngle, eAngle, leng, conterw, conterh, nAngle)
    53.             //绘制圆
    54.             drawArcFill(x, y);
    55.         }
    56.  
    57.         //绘制弧度
    58.         function drawArc(sAngle, eAngle, nAngle, conterw, conterh, strokeStyle = '#e1e8ee') {
    59.             ctx.beginPath();
    60.             //在基础sAngle上加上差量的角度  
    61.             nAngle += sAngle;
    62.             //控制最小的角度
    63.             if (sAngle > nAngle) {
    64.                 nAngle = sAngle;
    65.             }
    66.             //  控制最大的角度
    67.             if (eAngle < nAngle) {
    68.                 nAngle = eAngle;
    69.             }
    70.             //绘制角度
    71.             ctx.arc(conterw, conterh, leng, rad(sAngle), rad(nAngle), false);
    72.             ctx.strokeStyle = strokeStyle;
    73.             ctx.lineWidth = 5;
    74.             ctx.stroke();
    75.             ctx.closePath();
    76.         }
    77.         function drawArcFill(x, y) {
    78.             //绘制一个半径为5得红色圆形
    79.             ctx.beginPath();
    80.             ctx.arc(x, y, 5, 0, 2 * Math.PI, false);
    81.             ctx.fillStyle = 'red';
    82.             ctx.fill();
    83.             ctx.closePath();
    84.         }
    85.         //将上述的圆形放在进度条的头部,随着弧形的角度一起变化 
    86.         /**
    87.          * 
    88.          */
    89.         function getArcFillXY(sAngle, eAngle, leng, conterw, conterh, nAngle) {
    90.             //半径是
    91.             let x = conterw - leng;
    92.             let y = conterh;
    93.             //在基础sAngle上加上差量的角度
    94.             nAngle += sAngle
    95.             //控制最小的角度
    96.             if (sAngle > nAngle) {
    97.                 nAngle = sAngle;
    98.             }
    99.             //  控制最大的角度
    100.             if (eAngle < nAngle) {
    101.                 nAngle = eAngle;
    102.             }
    103.             //差值角度
    104.             let cAngle = nAngle - sAngle;
    105.             x = Math.cos(rad(nAngle)) * leng + conterw;
    106.             y = Math.sin(rad(nAngle)) * leng + conterh;
    107.             return {
    108.                 x, y
    109.             }
    110.         }
    111.         //度数转化为弧度得方法
    112.         function rad(sAngle) {
    113.             return sAngle * Math.PI / 180;
    114.         }
    115.  
    116.  
    117.     script>
    118. body>
    119.  
    120. html>

  • 相关阅读:
    26.原子类操作类
    AGC电路，模拟乘法器
    CentOS网络设置
    【无标题】
    SAP从放弃到入门系列之MRP中BOM的选择逻辑
    使用 Python 和 AI 将自己卡通化VToonify（教程含源码）
    记录一次内存泄漏排查过程
    threejs: layers实现图层的显示隐藏切换
    MongoDB从入门到精通、Springboot整合MongoDB
    第十三届蓝桥杯省赛Java A 组 F 题、Python A 组 G 题、Python B 组 G题——全排列的价值 （AC）
  • 原文地址：https://blog.csdn.net/huhudeni/article/details/133750994