使用canvas绘制一个环形进度表盘

一.直接上效果

二.html

   canvas:

   

三.js

         //获取画布元素   

         var  circlecanvas1 = document.getElementById("circle");

        //绘图方法
       function eachcanvas(dom,color1,percent){

               var PI=Math.PI;

               //绘制环形函数

              function draw(ang1,ang2,color,bool){
                  var ctx= dom.getContext("2d");
                  ctx.beginPath();
                  ctx.strokeStyle=color;
                  ctx.lineWidth=12;
                  ctx.arc(105,105,93, ang1, ang2,bool);
                  ctx.stroke()
               

               } 

            //   绘制灰色环形底色环

              draw(1/6*PI, 5/6*PI,"#f2f4f4",true);
        
           //进度环（刻度盘指针）需要旋转的角度

              var needcir = 4/3*PI*percent;

          //进度环实际结束的角度

            var endangle = needcir + 5/6*PI;

           //绘制图中绿色进度环   

           draw(5/6*PI, endangle,color1,false);

           //获取指针元素（根据不同布局获取你的指针元素，这里指针的默认位置为垂直位置）

              var zhizhen = dom.parentNode.getElementsByClassName("zhizhen")[0];

           //指针需要旋转的角度

              var rotate = ( 4/3*PI*percent - 2/3*PI)*180/PI;

           //旋转指针

              var rotatestr = "rotate("+rotate+"deg)";
              zhizhen.style.transform=rotatestr;

          }

          //调用绘图方法，传入画布元素，颜色，进度百分比
           eachcanvas(circlecanvas1,"#36c6a0", 6/10);