用Canvas画占百分比的圆形比例

先看一下效果图：

开发流程及主要思想

第一步：先画一个背景

第二步：占比例的圆的是从圆的正上方开始的画的，而默认情况下画的圆是从圆心的右边开始画的，所以要将圆旋转设置-90度，也就是 -Math.PI/2 

默认情况下画出来的圆

设置ratate后的效果 

context.rotate(-startArc);

第三步：效果图的开始点和结束点是圆形的，所以要画占比例的圆的开始点和结束点

开始点的圆:

在比例圆形上，以开始圆的左边为起点开始。所以画圆的圆心的坐标Y是开始圆的半径

  context.arc(83, 2, 2, 0, (Math.PI * 2) , false);

第一个参数是开始圆的X坐标的位置

第二个参数（Y坐标）和第三个参数（半径）值是一样的；

在画开始圆的时候需要先设置一下rotate，需要和比例圆的开始位置在一个起点上。

   context.rotate(-startArc);

这时我们通过运行代码看不出来有圆弧的效果，原因是开始圆的起点和比例圆的起点重叠在一起了。所以，我们要把比例圆的起点向前调(Math.PI/180*2)弧度

context.rotate(-startArc + Math.PI/180*2);

画结束圆的方式和开始圆一样。注意的是结束圆以它的右边为停止位置。所以画它的Y坐标为-2

context.arc(83, -2, 2, 0, (Math.PI * 2) , false);

第四步：如果比例是100%的话，那么就不需要画开始点和结束点的圆了

所以通过它来判断，如果余数是0 那么比例就是100%，所以就返回retrun;

    if ( curr % total == 0) {          return;        }

在画开始点和结束点的的坐标时还不够精确，目前我是用这种方式来画的，如果你有更好的方式请给留言.

代码如下：

CSS:

  .item {    float:left;    width:180px;    height:200px;    text-align:center;  }  .item h2 {    font-size:16px;  }

HTML：

<div class="chart-list">  <div class="item fl">    <div class="chart">      <canvas id="pullCanvas" width="180" height="180" data-total="28545" data-curr="28544"></canvas>    </div>    <h2 class="info">28544/28545</h2>  </div>  <div class="item  fl">    <div class="chart">      <canvas id="priceCanvas" width="180" height="180" data-total="34510" data-curr="24010"></canvas>    </div>    <h2 class="info">24010/34510</h2>  </div>  <div class="item  fl">    <div class="chart">      <canvas id="getCanvas" width="180" height="180" data-total="545411" data-curr="454011"></canvas>    </div>    <h2 class="info">454011/545411</h2>  </div>  <div class="item  fl">    <div class="chart">      <canvas id="clickCanvas" width="180" height="180" data-total="100" data-curr="66"></canvas></div>    <h2 class="info">66/100</h2>  </div></div>

JS:

 (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);    $("#pullCanvas").canvasChart({      borderColor: "#3ebfbe"    });    $("#priceCanvas").canvasChart({      borderColor: "#cc6600"    });    $("#getCanvas").canvasChart({      borderColor: "#f9a53e"    });    $("#clickCanvas").canvasChart({      borderColor: "#fa4444"    });