Beispiel für die gemeinsame Nutzung des JQuery-Plug-Ins „canvaspercent.js', um einen prozentualen Round-Cake-Effekt zu erzielen

In diesem Artikel wird hauptsächlich das JQuery-Plug-In „canvaspercent.js“ vorgestellt, um den prozentualen Round-Cake-Effekt zu erzielen. Ich hoffe, dass es jedem helfen kann.

Als die Anzahl der Aufgaben auf dem Dashboard zunahm, stieg auch der Prozentsatz der Ringe oder Pfannkuchen auf der Listenseite, daher habe ich ein kleines JQuery-Plug-In (jq-canvaspercent. js) gekapselt, die Version ist 1.0 für Derzeit werden seine Funktionen aufgrund von Geschäftsänderungen in Zukunft erweitert.

wird vorübergehend verwendet, um den Effekt mehrerer Prozentringe auf der Seite zu verarbeiten, was immer noch gut ist.

jq-canvaspercent.js-Code ist relativ einfach. Der Plug-in-Code und ein paar Screenshots sind direkt unten angegeben:

/* 
 * canvaspercent 0.1 
 * Copyright：HeavyShell 
 * Date: 2016-06-27 
 * 利用canvas绘图实现百分比percent圆饼图 
 */ 
(function($){ 
  $.fn.drawCanvasPercent = function(options){ 
    //各种属性、参数 
    var defaults = { 
      type:1, //类型默认1，有[1,2,3] 
      dw:'rem',  //判断是单位是rem还是px 
      cir_r:1,  //圆饼的直径 
      cir_color:'#0e9cfa', //圆饼的占比颜色 
      cir_color_op:'#e0ebf4', //圆饼的占比颜色 
      line_w:0.16,  //圆饼的线条宽度 
      fill_color:"#fff"  //圆饼的中间区域填充颜色 
    } 
    var options = $.extend(defaults, options); 
    this.each(function(){ 
      //插件实现代码 
      var cur_obj=$(this); 
      if(options.dw=="rem"){ 
        var cur_cir_r=options.cir_r*(window.screen.width/10); 
        var cur_line_w=options.line_w*(window.screen.width/10); 
      }else{ 
        var cur_cir_r=options.cir_r; 
        var cur_line_w=options.line_w; 
      } 
      var cur_type=options.type; 
      var cur_cir_color=options.cir_color; 
      var cur_cir_color_op=options.cir_color_op; 
      var cur_fill_color=options.fill_color; 
      var percent=cur_obj.attr('data-percent'); 
      cur_obj.attr({'width':cur_cir_r,'height':cur_cir_r}); 
      cur_obj.css({'border-radius':"50%",'background':cur_cir_color_op}); 
      if(cur_obj[0].getContext){ 
 
        if(cur_type==2){ 
          //无填充颜色，且线条宽度等于直径 
          cur_line_w=cur_cir_r; 
        }else if(cur_type==3){ 
          //无填充颜色 
        }else{ 
          //有填充颜色 
          var ctx2 = cur_obj[0].getContext("2d"); 
          ctx2.fillStyle = cur_fill_color; 
          ctx2.arc(cur_cir_r/2, cur_cir_r/2, cur_cir_r/2-cur_line_w/2, 0, Math.PI*2, false); 
          ctx2.fill(); 
        } 
 
        var ctx = cur_obj[0].getContext("2d"); 
        ctx.beginPath(); 
        ctx.strokeStyle = cur_cir_color; 
        ctx.lineWidth=cur_line_w; 
        ctx.arc(cur_cir_r/2, cur_cir_r/2, cur_cir_r/2, 0, Math.PI*(percent/100)*360/180, false); 
        ctx.stroke(); 
      } 
    }); 
  }; 
})(jQuery);

Aufrufmethode:

$(function(){ 
    $('.perCanvas').drawCanvasPercent(); 
  });

Geben Sie außerdem den HTML-Seitencode an:

 
 
 
   
   
   
   
   
   
   
   
 
 
 
 
   
    您的浏览器不支持canvas标签。 
   
  第一章：进度 80% 
 
 
   
    您的浏览器不支持canvas标签。 
   
  第一章：进度 50% 
 
 
   
    您的浏览器不支持canvas标签。 
   
  第一章：进度 75% 
 
 
   
    您的浏览器不支持canvas标签。 
   
  第一章：进度 35% 
 
 
   
    您的浏览器不支持canvas标签。 
   
  第一章：进度 95% 
 
 
   
    您的浏览器不支持canvas标签。 
   
  第一章：进度 13% 
 
 
 
 
 
 
 
 

Der Screenshot sieht wie folgt aus:

Verwandte Empfehlungen:

Detaillierte Erläuterung der CSS-Prozentauffüllung zur Erstellung eines bildadaptiven Layouts

Erklärung der Ajax-Implementierung eines einfachen Fortschrittsbalkens mit Prozentsatz

Beurteilen Sie den Bildladestatus und erzielen Sie eine prozentuale Effektladung

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung des JQuery-Plug-Ins „canvaspercent.js', um einen prozentualen Round-Cake-Effekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!