canvas 画圈 demo

html代码：

<canvas id="clickCanvas2"  width="180" height="180" data-total="100" data-curr="75"></canvas>

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画圆函数结束

转载于:https://www.cnblogs.com/xiaoliu12/p/6118032.html