Canvas三种动态画圆实现方法说明

前言
canvas是HTML5出来的绘图API容器,对于图形的处理非常强大,下面使用canvas配合JavaScript来做一下动态画圆效果。可以用它来做圆形进度条来使用。 
这里我个人总结了3种实现方法,大家可以参考一下。

方法一:arc()实现画圆
效果:

代码:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    #myCanvas{
        margin: 0 auto;
        display: block;
    }
    </style>
</head>
<body>
  <canvas id="myCanvas">当前浏览器不支持canvas组件请升级!</canvas>

  <script type="text/javascript">
  //方法一:arc 动态画圆
  var c = document.getElementById('myCanvas');
  var ctx = c.getContext('2d');

  var mW = c.width = 300;
  var mH = c.height = 300;
  var lineWidth = 5;
  var r = mW / 2; //中间位置
  var cR = r - 4 * lineWidth; //圆半径
  var startAngle = -(1 / 2 * Math.PI); //开始角度
  var endAngle = startAngle + 2 * Math.PI; //结束角度
  var xAngle = 1 * (Math.PI / 180); //偏移角度量
  var fontSize = 35; //字号大小
  var tmpAngle = startAngle; //临时角度变量

  //渲染函数
  var rander = function(){
    if(tmpAngle >= endAngle){
      return;
    }else if(tmpAngle + xAngle > endAngle){
      tmpAngle = endAngle;
    }else{
      tmpAngle += xAngle;
    }
    ctx.clearRect(0, 0, mW, mH);

    //画圈
    ctx.beginPath();
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = '#1c86d1';
    ctx.arc(r, r, cR, startAngle, tmpAngle);
    ctx.stroke();
    ctx.closePath();

    //写字
    ctx.fillStyle = '#1d89d5';
    ctx.font= fontSize + 'px Microsoft Yahei';
    ctx.textAlign='center';
    ctx.fillText( Math.round((tmpAngle -  startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);

    requestAnimationFrame(rander);
  };

  rander();
  </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_36838191/article/details/88219831