使用canvas编写环形图.

原理使用canvas画图:

第一步:画一个大圆

第二部:画一个扇形

第三部:画一个小圆

相互叠加.

最终效果:

现在上代码:

(function($){

    $.fn.drawPic=function(opts){

        var defaults={

            canvasbj:"white",//画布背景

            canvasWidth:50,

            canvasHeight:50,

            bigBg:"red",//大圆背景

            bigRadius:50,//大圆半径

            ringColor:"yellow",//环形颜色

            smallBg:"white",//小圆背景

            smallRadius:30,//小圆半径

            deg:0.25,//百分比,90度

            text:"90/360",

            textColor:"black",

            textFont:"normal 14px 微软雅黑"

        };

        function draw(id,opt){

            var canvas=document.getElementById(id);

            if(canvas==null){

                return false;

            }

            var ctx=canvas.getContext('2d');

            //填充画布

            ctx.fillStyle=opt.canvasbj;

            ctx.fillRect(0,0,opts.canvasWidth,opts.canvasHeight);

            ctx.beginPath();

            //重置画布起点

            ctx.translate(opts.canvasWidth/2, opts.canvasHeight/2);

            //转到新起点

            ctx.moveTo(0,0);

            //画大圆

            ctx.arc(0,0,opts.bigRadius,0,Math.PI*2,true);

            ctx.closePath();

            ctx.fillStyle=opts.bigBg;

            ctx.fill();

            //开始绘制扇形

            ctx.beginPath();

            ctx.moveTo(0, 0);

            // 绘制圆弧

            ctx.arc(0, 0, opts.bigRadius, 0, -1*opts.deg*360*Math.PI/180,true);

            // 闭合路径

            ctx.closePath();

            ctx.fillStyle=opts.ringColor;

            ctx.fill();

            //绘制小圆

            ctx.beginPath();

            ctx.moveTo(0,0);

            ctx.arc(0,0,opts.smallRadius,0,Math.PI*2,true);

            ctx.closePath();

            ctx.fillStyle=opts.smallBg;

            ctx.fill();

            //绘制文字

            ctx.moveTo(0,0);//移动笔触到原点

            ctx.fillStyle=opts.textColor;//文本颜色

            ctx.font=opts.textFont;//文本

            ctx.textAlign="center";//相对原点水平居中

            ctx.textBaseline="middle";//相对原点垂直居中

            ctx.fillText(opts.text,0,0);//开始写字

        }

        opts=$.extend({},defaults,opts);

        this.each(function(){

            var obj=$(this);

            var currentCanvas="canvas"+(new Date()).getTime();

            obj.html("<canvas id='"+currentCanvas+"' width='"+opts.canvasWidth+"' height='"+opts.canvasHeight+"'>您的设备不支持!</canvas>");

            draw(currentCanvas,opts);

        });

    }

})(jQuery);

Html代码以及调用:

　　<div class="pie1"></div>

    <script type="text/javascript">

        $(".pie1").drawPic({

            canvasbj:"#ccc",//画布背景

            canvasWidth:400,

            canvasHeight:300,

            bigBg:"red",//大圆背景

            bigRadius:80,//大圆半径

            ringColor:"yellow",//环形颜色

            smallBg:"white",//小圆背景

            smallRadius:65,//小圆半径

            deg:0.25,//百分比

            text:"90/360",

            textColor:"black",

            textFont:"normal 30px 微软雅黑"

        });

    </script>