canvas 画圈 demo

html代码：

js代码：

$(function(){

               $("#clickCanvas1”).canvasChart({
                   borderColor: "#24a8e6"
                });

       });

// canvas画圆函数开始
(function($, window, undefined) {

         $.fn.canvasChart = function(options) {

           var defaults = { };
           var settings = $.extend({}, defaults, options);

           var canvas = $(this).get(0);
           var total = $(this).attr("data-total");
           var curr = $(this).attr("data-curr");
           var constrast = parseFloat(curr/total).toFixed(2); //比例
           var context = null;

           if ( !canvas.getContext) {
             return;
           }

           // 定义开始点的大小
           var startArc = Math.PI/2;
           // 根据占的比例画圆弧
           var endArc = (Math.PI * 2) * (constrast);

           context = canvas.getContext("2d");
           context.translate(90,90);

           // 绘制背景圆
           context.save(); // 保存当前状态包含颜色路径变形
           context.beginPath(); // 定义一个子路径开始
           context.strokeStyle = "#e9e9e9"; //线的颜色
           context.lineWidth = "2";// 线的大小
           context.arc(0, 0, 85, 0, Math.PI * 2, true);// 画一个圆
           context.closePath();// 关闭子路径
           context.stroke();

           context.restore();// 还原上一个save保存的状态

           // 绘制比例圆
           context.save();
           context.rotate(-startArc + Math.PI/180*2);
           context.beginPath();
           context.strokeStyle = settings.borderColor;
           context.lineWidth = "4";
           context.arc(0, 0, 83, 0, (curr % total == 0 ? Math.PI*2 : (endArc-Math.PI/180*3)), false);
           context.stroke();

           context.restore();

           // 判断如果是百分百就不用画开始点和结束点的圆了
           if ( curr % total == 0) {
             return;
           }

           // 绘制开始时圆点
           context.save();
           context.rotate(-startArc);
           context.beginPath();
           context.fillStyle = settings.borderColor;
           context.arc(83, 2, 2, 0, (Math.PI * 2) , false);
           context.fill();

           context.restore();

           // 绘制结束时圆点
           context.save();
           context.rotate(endArc-startArc);
           context.beginPath();
           context.fillStyle = settings.borderColor;
           context.arc(83, -2, 2, 0, (Math.PI * 2) , false);
           context.fill();

           context.restore();

         }

       })($, window);

// canvas画圆函数结束