可配置,canvas百分比画圆工具








0

//drawcircle.js代码
function DrawCircleScore(init){ //画圆
  var inits=init;
  var id=inits.id,time=inits.speed,number=inits.number,circle_x=inits.circle_x,circle_y=inits.circle_y,radiuss=inits.radius,num_sel = init.num_sel;
  var radius;
  var text_dom = document.querySelector(num_sel);
  var score=number*2;
  var graduation=init.graduation||100; //总格子数
  var linewidth=init.linewidth||40; //线宽度
  var canvas=document.getElementById(id);
  var canv_h=canvas.getAttribute('height')/2;
  var canv_w=canvas.getAttribute('width')/2;
  if(typeof(radiuss)=='undefined'){
    radiuss=canv_h<=canv_w?canv_h:canv_w;
  }
  if((typeof(circle_y)=='undefined')||(typeof(circle_x)=='undefined')){
    circle_x=canv_w;
    circle_y=canv_h;
  }
  var ctx=canvas.getContext('2d');
  ctx.strokeStyle='#1E90FF';
  ctx.lineWidth=linewidth;
  var i=0;
  var tt=setInterval(function(){
    radius=radiuss;
    ctx.beginPath();
    ctx.arc(circle_x,circle_y,radius-linewidth/2,(1.5+i*(1/graduation))*Math.PI,(1.5+(1/graduation)*(i+1))*Math.PI);
    ctx.stroke();
    ctx.closePath();
    text_dom.innerText = i/2;
    text_dom.textContent = i/2;
    i+=2;
    if(i>score){
      clearInterval(tt);
      ctx.strokeStyle='#C0C0C0';
      drawGrey();
    }
  },time);
  var n=score;
  function drawGrey(){
    var dtt=setInterval(function(){
       if(n>=graduation*2){
        clearInterval(dtt);
        return;
      }
      ctx.beginPath();
      ctx.arc(circle_x,circle_y,radius-linewidth/2,(1.5+n*(1/graduation))*Math.PI,(1.5+(1/graduation)*(n+1))*Math.PI);
      ctx.stroke();
      ctx.closePath();
      n+=2;
    },time);
  }
}

 
  

 效果图 
  

可配置,canvas百分比画圆工具_第1张图片










你可能感兴趣的:(js)