【HTML】canvas画扇形

<div class="can">
                <!--
                    data-color:为饼图的颜色
                    data-pro:为百分比，必须用小数（例：0.45），不能用百分数（例：45%）
                 -->
                <canvas id="pro1" data-color="#ff7800" data-pro="0.89" class="pro">
                    此浏览器不支持canvas
                </canvas>
            </div>
            <script type="text/javascript">
            var pro1 = new PRO('pro1');
            pro1.start();
            </script>


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);
    }
}