canvas circle loading

作者: afeng_1234 | 来源:发表于2018-12-09 22:37 被阅读0次

canvas circle loading
圆形头像
Canvas画圆环or进度条
绘图中的其他知识点总结
前端学习之路——canvas动态画圆写加载中
Android-UI控件
一个圆环进度条插件 circle-progress-bar
es6 类：class
【中英双语】人生的完整
[英语美文摘抄]在生活中保持完好(Be Whole in Lif

<!DOCTYPE html>
<html>
  <style>
    body{
      background: #021032;
    }
  </style>
<body>

<canvas id="myCanvas" width="300" height="300">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script type="text/javascript">
/**
 * 求坐标位置 
 * author: xuhengfeng <564297479@qq.com>
 * @param {Number} x 圆心的横坐标
 * @param {Number} y 圆心的纵坐标
 * @param {Number} r 半径
 * @param {Number} radian 弧度
 * 180/Math.PI 角度制  一弧度所对应的角度
 * Math.PI/180 弧度制  一角度所对应的弧度
 */
function point(x, y, r, radian) {
  var x1;//x坐标
  var y1;//y坐标
  x1 = x + Math.cos(radian) * r ;
  y1 = y + Math.sin(radian) * r ;
  return {
    x: x1,
    y: y1
  }
}
</script>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var c_width = 300;//外圆的宽度
var c_height = 300;//外圆的高度
var c_r = 80;//外圆的半径

function draw(n) {
  ctx.clearRect(0, 0, c_width, c_height);
  // 外圆
  ctx.beginPath(); 
  ctx.arc(c_width/2, c_height/2, c_r, 0, Math.PI * 2, true); 
  ctx.closePath();
  ctx.fillStyle = "#ccc"; //填充颜色 
  ctx.fill();

  // 画内部空白 
  ctx.beginPath(); 
  ctx.arc(c_width/2, c_height/2, c_r-10, 0, Math.PI * 2, true); 
  ctx.closePath(); 
  ctx.fillStyle = '#021032';  // 填充内部颜色
  ctx.fill();

   
  // 坐标位置
  var opts = point(c_width/2, c_height/2, c_r-5, ((Math.PI * 2) * n ) - Math.PI / 2, false);
  var x1 = opts.x;
  var y1 = opts.y;

  // 绘制线条
  // ctx.beginPath();
  // ctx.strokeStyle = "#2e75e3"; 
  // ctx.lineCap = "round"; 
  // ctx.lineWidth = 10;//绘制内圆的线宽度
  // ctx.arc(c_width/2, c_height/2, c_r-5, -(Math.PI / 2), ((Math.PI * 2) * n ) - Math.PI / 2, false);
  // ctx.stroke(); 

  ctx.beginPath();
  var lg = ctx.createLinearGradient( 0, 0, 400, 500 );
  lg.addColorStop( 0,   "#2e75e3");
  // lg.addColorStop( 0.5, "#2e75e3");
  lg.addColorStop( 1,   "#f00");
  ctx.strokeStyle = lg; 
  ctx.lineCap = "round"; 
  ctx.lineWidth = 10;//绘制内圆的线宽度
  ctx.arc(c_width/2, c_height/2, c_r-5, -(Math.PI / 2), ((Math.PI * 2) * n ) - Math.PI / 2, false);
  ctx.stroke(); 



  // 画发光的圆点
  // ctx.beginPath(); 
  // ctx.shadowBlur=20;
  // ctx.shadowColor="green";
  // ctx.arc(x1,y1,8,0,Math.PI*2,true); 
  // ctx.fillStyle="#fff";
  // ctx.fill();
  
  // 画发光的圆点
  ctx.beginPath();  
  var rg =ctx.createRadialGradient(x1,y1,1, x1, y1, 25);      
  rg.addColorStop(0,   '#278cfe');      
  rg.addColorStop(0.5, '#27fac3');      
  rg.addColorStop(1,   'yellow');   
  ctx.arc(x1,y1,15,0,Math.PI*2,true);
  ctx.closePath();   
  ctx.fillStyle = rg;      
  ctx.fill(); 

  //在中间写字 
  var n2 = Number(n*100).toFixed(0);
  ctx.font = "bold 50px Arial";  // 字体大小，样式
  ctx.fillStyle = "#fff";  // 颜色
  ctx.textAlign = 'center';  // 位置
  ctx.textBaseline = 'middle'; 
  ctx.moveTo(c_width/2, c_height/2);  // 文字填充位置
  ctx.fillText(n2+"%", c_width/2, c_height/2);
}

var value= Number(66);// 当前百分比,数值 
var timer=null,n=0;
function loadCanvas(nowT){
    timer = setInterval(function(){
        if(n>nowT){
          clearInterval(timer);
        }else{
          n += 0.008;
          draw(n);
        }
    },15);
}
loadCanvas(value/100);


</script>

</body>
</html>