【HTML】canvas画扇形

                
                
                    此浏览器不支持canvas
                
            
            


var PRO = function(_id,_proportion){
    var canvas = {
        ele    :null,
        width  :0,
        height :0
    };
    var color = null;   // 颜色
    var pro   = null;   // 百分比（小数）
    var cxt   = null;
    var txt   = null;   // 圈中间的百分比文字

    this.start = function(){
        init();
        draw();
    }
    var init = function(){
        canvas.ele = cQuery.id(_id);
        canvas.width = parseInt(cQuery.getStyle(canvas.ele,'width'));
        canvas.height = parseInt(cQuery.getStyle(canvas.ele,'height'));
        color = canvas.ele.getAttribute('data-color');
        pro = canvas.ele.getAttribute('data-pro');
        txt = pro*100+'%';
    }
    var draw = function(){

        var cxt=canvas.ele.getContext("2d");
        cxt.fillStyle="#f1f1f1";
        cxt.beginPath();
        cxt.translate(75,75);  //起点位置
        cxt.moveTo(0,0);
        cxt.arc(0,0,70,0,2*Math.PI);
        cxt.closePath();
        cxt.fill();

        cxt.fillStyle=color;
        cxt.beginPath();
        cxt.translate(0,0);
        cxt.moveTo(0,0);
        cxt.arc(0,0,70,0,2*Math.PI*pro);
        cxt.closePath();
        cxt.fill();

        cxt.fillStyle="#fff";
        cxt.beginPath();
        cxt.translate(0,0);
        cxt.moveTo(0,0);
        cxt.arc(0,0,58,0,2*Math.PI);
        cxt.closePath();
        cxt.fill();

        cxt.fillStyle = color;
        cxt.font = '44px Arial';
        cxt.fillText(txt,-40,15);
    }
}