jquery插件canvaspercent.js实现百分比圆饼效果

在仪表盘的任务增多同时，列表页的百分比圆环或圆饼也随之增多，于是顺手在仪表盘的基础上，封装了一个小小的jquery插件(jq-canvaspercenter。js)，暂且版本1.0吧，到以后业务的变化在对其进行功能拓展；

暂时性用于页面中有多处百分比圆环的效果处理，还是不错的。

jq-canvaspercenter。射流研究…代码比较简单，以下直接给出插件代码和几张截图：

/* * canvaspercent 0.1 *版权所有：HeavyShell *日期： 2016-06-27 *利用帆布绘图实现百分比百分比圆饼图*/(函数($){ $ .fn。drawinvaspercent=函数（选项){ //各种属性、参数定义变量默认值={ type:1，//类型默认1,有[1，2，3] dw:'rem '，//判断是单位是雷姆还是px cir_r:1，//圆饼的直径cir_color:'#0e9cfa '，//圆饼的占比颜色cir_color_op:'#e0ebf4 '，//圆饼的占比颜色line_w:0.16，//圆饼的线条宽度fill_color:'#fff' //圆饼的中间区域填充颜色} var选项=$ .扩展（默认值、选项);this.each(function(){ //插件实现代码var cur _ obj=$(this)；if(选项。dw==' rem '){ var cur _ cir _ r=options。cir _ r *(窗口。屏幕。宽度/10)；var cur _ line _ w=选项。line _ w *(窗口。屏幕。宽度/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 _ colorvar cur _ cir _ color _ op=options。cir _ color _ opvar cur _ fill _ color=选项。fill _ colorvar百分比=cur _ obj。attr('数据百分比')；cur _ obj。attr({ ' width ' : cur _ cir _ r，' height ' : cur _ cir _ r })；cur_obj.css({ '边框半径' :'50% ','背景： 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 ')；CTX 2 . FillStyle=cur _ fill _ color CTX 2 . arc(cur_cir_r/2，cur _ cir _ r/2，cur_cir_r/2-cur_line_w/2，0，Math .PI*2，假);CTX 2。fill()；} var ctx=cur_obj[0].getContext(' 2d ')；CTX。begin path()；CTX . strokestyle=cur _ cir _ color CTX。线宽=cur _ line _ w；(cur_cir_r/2，cur_cir_r/2，cur_cir_r/2，0，Math .PI*(百分比/100)*360/180,假);CTX。笔画()；} });};})(jQuery)；调用方式：

$(function(){ $(').perCanvas ').drawinvaspercent()；});也给出超文本标记语言页面代码吧：

！doctype html html lang=' en ' head meta charset=' utf-8 ' meta http-equiv=' Pragma ' content=' no-cache ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0，user-scalable=no '/meta name=' format-detection ' content=' phone=no '/meta name=' apple-mobile-web-app-style ' content=' yes '/meta name=' apple-mobile-web-app-status-bar-style '背景技术# ee epad :3 rem } div span { display : }块；右浮动：余量margin :22 rem 2 rem 0 0 font-size :4 rem；font-family : Microsoft yahei } div canvas {-web kit-transform : rotateZ(-270)；transform : rotatez(-270)；-网络套件-动画： ani 01 1s ease 0s两者；动画：ani01 1s ease 0s两者；} @-网络工具包-关键帧ani01 { 0% {-web kit-transform : scale(。5,5)Rotatez(-270)；transform:scale(.5，5)Rotatez(-270)；} 100% {-web kit-transform : scale(1，1)Rotatez(-90)；transform:scale(1，1)Rotatez(-90)；} } @关键帧ani01 { 0% {-WebKit-transform : scale(。5,5)Rotatez(-270)；transform:scale(.5，5)Rotatez(-270)；} 100% {-web kit-transform : scale(1，1)Rotatez(-90)；transform:scale(1，1)Rotatez(-90)；} }/样式/头体div画布数据-百分比='80' class='perCanvas '您的浏览器不支持帆布标签画布跨度第一章：进度80%/跨度/div画布数据-百分比='50' class='perCanvas '您的浏览器不支持帆布标签画布跨度第一章：进度50%/跨度/div画布数据-百分比='75' class='perCanvas '您的浏览器不支持帆布标签画布跨度第一章：进度75%/span /div画布数据-百分比='35' class='perCanvas '您的浏览器不支持帆布标签画布跨度第一章：进度35%/span /div画布数据-百分比='95' class='perCanvas '您的浏览器不支持帆布标签画布跨度第一章：进度95%/span /div画布数据-百分比='13' class='perCanvas '您的浏览器不支持帆布标签画布跨度第一章：进度13%/span /div脚本类型=' text/JavaScript ' src=' http : js/flexible。js /脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。7 .2 .量滴js /脚本类型=' text/JAVAScript ' src=' http : js/jq-canvaspercent。js /脚本脚本类型='text/javascript' $ 'perCanvas ').drawinvaspercent()；});/脚本/正文/html截图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。