cavas-圆形动态进度条

cavas-圆形动态进度条

<script>
    var c3=document.getElementById("c3");
    var ctx=c3.getContext("2d");
    // 绘制动态进度条
    // 1创建变量保存起始角度与结束角度
    var start=-90;
    var end=-90;
    // 2.创建变量保存数值 1%;
    var num=0;
    // 3.创建定时器
    var t=setInterval(()=>{
      // 4.清画布
      ctx.clearRect(0,0,500,400)
      // 5.创建灰色底框
      ctx.beginPath();
      ctx.arc(250,200,80,0,2*Math.PI)
      // 6.设置边线颜色与线宽
      ctx.strokeStyle="#999";//颜色
      ctx.lineWidth=15;//线宽
      ctx.stroke();
      // 7.动态绿色条
      // 8.修改结束角度+3.6
      end+=3.6;
      // 9.画圆
      ctx.beginPath();
      ctx.arc(250,200,80,start*Math.PI/180,end*Math.PI/180);
      ctx.strokeStyle="#f5a";
      ctx.stroke();
      // 10.绘制文字100%
      ctx.stroke();
      // 11.数值加一 num
      num+=1;
      // 12.绘制画布中心
      ctx.font="25px SimHei"
      ctx.fillText(num+"%",240,195);
      // 13：如果num>=100 停止定时器
      if(num>=100){
        clearInterval(t)
      }
    },100)
    
  </script>

带尺寸的图片:

居中的图片:

ai.github.io/flowchart.js/