canvas 动态画圆笔记一

.circle_w {
  width: 158px;
  height: 158px;
  position: relative;
}
.inner_circle {
  width: 140px;
  height: 140px;
  position: absolute;
  top: 9px;
  left: 9px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #717171;
  background-repeat: no-repeat;
  background-image: url(../../../img/circle_bg1.png);
  background-position: -7px 138px;
}
#myCanvas1{
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0;
}

 <div class="circle_w">
    <div class="inner_circle"></div>
    <canvas id="myCanvas">当前浏览器不支持canvas组件请升级！</canvas>
</div>

var drawCircle = function(){
    var c = document.getElementById('#myCanvas');
    var ctx = c.getContext('2d');
    var mW = c.width = 158;
    var mH = c.height = 158;
    var lineWidth = 3;
    var r = mW / 2; //中间位置
    var cR = r - lineWidth; //圆半径
    var startAngle = -(1 / 2 * Math.PI); //开始角度
    var endAngle = startAngle+Math.PI*2*obj.data; //结束角度
    var xAngle = 1 * (Math.PI / 180); //偏移角度量
    var fontSize = 18; //字号大小
    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.strokeStyle="#b2b2b2";
        ctx.lineWidth = 1;
        ctx.arc(r, r, cR,0,360,false);
        ctx.stroke();
        ctx.closePath();
    
        //画一个实心圆
        //ctx.beginPath();
        //ctx.arc(r, r, cR-7,0,360,false);
        //ctx.fillStyle="#717171";
        //ctx.fill();//画实心圆
        //ctx.closePath();
        
        //画空心圈
        ctx.beginPath();
        ctx.lineWidth = lineWidth;
        //渐变色
        var grad  = ctx.createLinearGradient(0,0,0,100);
        grad.addColorStop(0, obj.color1);
        grad.addColorStop(1, obj.color2);
        ctx.strokeStyle = grad;
        ctx.arc(r, r, cR, startAngle, tmpAngle);
        ctx.stroke();
        ctx.closePath();
        
        //写字
        ctx.fillStyle = '#fff';
        ctx.font= fontSize + 'px Microsoft Yahei';
        ctx.textAlign='center';
        ctx.fillText( Math.round((tmpAngle +  1/2*Math.PI)/2/Math.PI* 100) + '%', r, 60);
        ctx.font= '12px Microsoft Yahei';
        ctx.fillText( obj.title , r, 33);
        var _top = -164*_data+139;
        var _top = Math.round((tmpAngle +  1/2*Math.PI)/2/Math.PI*+obj.a+obj.b);
        $page("."+obj.class).css({"background-positionY":_top});
        //屏幕刷新频率
        requestAnimationFrame(rander); 
    };
    rander();
}


var obj = {
    id:'myCanvas',
    class:'inner_circle',
    title:'内存',
    data:0.6, 
    a:-164,
    b:138,
    color1:'#664efc', //渐变起始颜色
    color2:'#a8b7ff'
};
drawCircle(obj)