Home > Web Front-end > JS Tutorial > body text

Example sharing of jquery plug-in canvaspercent.js to achieve percentage round cake effect

小云云
Release: 2017-12-31 16:58:45
Original
1704 people have browsed it

This article mainly introduces the jquery plug-in canvaspercent.js to achieve the percentage round cake effect in detail. It has a certain reference value. Interested friends can refer to it. I hope it can help everyone.

As the number of tasks on the dashboard increases, the number of percentage rings or pancakes on the list page also increases, so based on the dashboard, a small jquery plug-in (jq-canvaspercent. js), the version is 1.0 for the time being, and its functions will be expanded in the future due to business changes;

is temporarily used to process the effect of multiple percentage rings on the page, which is still good.

jq-canvaspercent.js code is relatively simple. The plug-in code and a few screenshots are given directly below:


/* 
 * 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);
Copy after login


Calling method :


$(function(){ 
    $('.perCanvas').drawCanvasPercent(); 
  });
Copy after login

Also give the html page code:


 
 
 
   
   
   
   
   
   
  demo01 
   

您的浏览器不支持canvas标签。 第一章:进度 80%

您的浏览器不支持canvas标签。 第一章:进度 50%

您的浏览器不支持canvas标签。 第一章:进度 75%

您的浏览器不支持canvas标签。 第一章:进度 35%

您的浏览器不支持canvas标签。 第一章:进度 95%

您的浏览器不支持canvas标签。 第一章:进度 13%

Copy after login

The screenshot is as follows:




related suggestion:

Detailed explanation of CSS percentage padding to create adaptive layout of images

Example to explain Ajax implementation of simple progress bar with percentage

Image loading status Determine and achieve percentage effect loading

The above is the detailed content of Example sharing of jquery plug-in canvaspercent.js to achieve percentage round cake effect. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!