drawCircleProgress

drawCircleProgress.markdown

drawCircleProgress

A Pen by reygreen1 on CodePen.

License.

index.html

<div class="canvas-wrap">
  <canvas class="circle-process" width="100" height="100" >25%</canvas>
  <div class="text">
    <p class="num">10%</p>
    <p class="tit">年化收益率</p>
  </div>
</div>

<div class="canvas-wrap">
  <canvas class="circle-process" width="100" height="100" >50%</canvas>
  <div class="text">
    <p class="num">13%</p>
    <p class="tit">年化收益率</p>
  </div>
</div>

<div class="canvas-wrap">
  <canvas class="circle-process" width="100" height="100" >75%</canvas>
  <div class="text">
    <p class="num">9.22%</p>
    <p class="tit">年化收益率</p>
  </div>
</div>

<div class="canvas-wrap">
  <canvas class="circle-process" width="100" height="100" >100%</canvas>
  <div class="text">
    <p class="num">11.3%</p>
    <p class="tit">年化收益率</p>
  </div>
</div>

script.js

 $(function(){
    initCanvas();
   function initCanvas(){
     // 选出页面上所有class为process的canvas元素
      $('canvas.circle-process').each(function() {
        // 获取进度数值
        var text = $(this).text();
        var process = text.substring(0, text.length-1);
        drawProcess(this, process);
      });
     //hover事件
     var processInterval = null;
     $('.canvas-wrap').hover(function(e){
       var start = 0,
           canvas = $(this).find('canvas.circle-process')[0],
           end = $(canvas).text().split('%')[0],
           intervalTime = 500/end;
       processInterval = setInterval(function(){
         //画帧
         drawProcess(canvas, start++);
         if(start > end){
           clearInterval(processInterval);
           processInterval = null;
         }
       }, intervalTime);
     }, function(e){
       var canvas = $(this).find('canvas.circle-process')[0],
           end = $(canvas).text().split('%')[0];
       if(processInterval){
         //有动画，直接显示最终效果
         clearInterval(processInterval);
         processInterval = null;
         drawProcess(canvas, end);
       }
     });
   }
   function drawProcess(canvas, process) {
        // 拿到绘图上下文
        var context = canvas.getContext('2d');
        var cWidth = canvas.width;
        var cHeight = canvas.height;
        var circleX = cWidth/2;
        var circleY = cHeight/2;
        var circleR = circleX-2;
      // 将绘图区域清空,如果是第一次在这个画布上画图,画布上没有东西,这步就不需要了
        context.clearRect(0, 0, cWidth, cHeight);
        //灰色背景
        context.beginPath();
                // 画扇形的时候这步很重要,画笔不在圆心画出来的不是扇形
        context.moveTo(circleX, circleY);
                // 跟上面的圆唯一的区别在这里,不画满圆,画个扇形
        context.arc(circleX, circleY, circleR, 0, Math.PI * 2, false);
        context.closePath();
        context.fillStyle = '#eee';
        context.fill();
        // 画进度
        context.beginPath();
                // 画扇形的时候这步很重要,画笔不在圆心画出来的不是扇形
        context.moveTo(circleX, circleY);
                // 跟上面的圆唯一的区别在这里,不画满圆,画个扇形
        context.arc(circleX, circleY, circleR, -Math.PI/2, Math.PI * (2 * process / 100-.5), false);
        context.closePath();
        context.fillStyle = '#fd6424';
        context.fill();

        // 画内部空白
        context.beginPath();
        context.moveTo(circleX, circleY);
        context.arc(circleX, circleY, circleR-2, 0, Math.PI * 2, true);
        context.closePath();
        context.fillStyle = '#fff';
        context.fill();
        
        if(process != 100){
            //终端原点
          context.beginPath();
          //移动到终端位置
          var x1 = circleX + (circleR-1) * Math.sin(Math.PI * 2 * process / 100);
          var y1 = circleY - (circleR-1) * Math.cos(Math.PI * 2 * process / 100);
          context.moveTo(x1, y1);
          context.arc(x1, y1, 3, 0, Math.PI * 2, true);
          context.closePath();
          context.fillStyle = '#fd6424';
          context.fill();
        }
    }
});                         

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body{
  background:#fff;
}

.canvas-wrap{
  position: relative;
  float:left;
  width: 100px;
  height: 100px;
  margin: 10px 20px 0 10px;
}

.circle-process{
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

.text{
  position: absolute;
  top : 0;
  left : 0;
  width: 100px;
  text-align: center;
}
.text .num{
  font-size: 20px;
  margin: 30px 0 0 0;
  color: #fd6424;
}
.text .tit{
  font-size: 12px;
  margin: 8px 0 0;
  color: #aeaeae;
}