在仪表盘的任务增多同时,列表页的百分比圆环或圆饼也随之增多,于是顺手在仪表盘的基础上,封装了一个小小的jquery插件(jq-canvaspercent.js),暂且版本1.0吧,到以后业务的变化在对其进行功能拓展;
暂时性用于页面中有多处百分比圆环的效果处理,还是不错的。
jq-canvaspercent.js代码比较简单,以下直接给出插件代码和几张截图:
/*
* canvaspercent 0.1
*版权:HeavyShell
*日期:2016-06-27
*利用帆布绘图实现百分比百分比圆饼图
*/(函数(美元){
.fn美元。drawCanvasPercent=function(选项){//各种属性,参数
var={违约
类型:1、//类型默认1,有(1、2、3)
dw:“快速眼动”,//判断是单位是rem还是px
cir_r: 1、//圆饼的直径
cir_color:“# 0 e9cfa ',//圆饼的占比颜色
cir_color_op:“# e0ebf4 ',//圆饼的占比颜色
line_w: 0.16//圆饼的线条宽度
fill_color:“# fff“//圆饼的中间区域填充颜色
}=$ var选项。扩展(默认选项);
this.each(函数(){//插件实现代码
var cur_obj=$ ();
如果(options.dw==翱焖傺鄱?{
var cur_cir_r=options.cir_r * (window.screen.width/10);
var cur_line_w=options.line_w * (window.screen.width/10);
其他}{
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=cur_obj.attr百分比(“data-percent”);
cur_obj.attr({“宽度”:cur_cir_r,“高度”:cur_cir_r});
cur_obj.css ({border - radius的:“50%”,“背景”:cur_cir_color_op});
如果(cur_obj [0] .getContext) {
如果(cur_type==2) {//无填充颜色,且线条宽度等于直径
cur_line_w=cur_cir_r;
}else if (cur_type==3) {//无填充颜色
其他}{//有填充颜色
var ctx2=cur_obj [0] .getContext (2 d);
ctx2。fillStyle=cur_fill_color;
ctx2。弧(cur_cir_r/2, cur_cir_r/2, cur_cir_r 2-cur_line_w/2 0,数学。π* 2,假);
ctx2.fill ();
}
var ctx=cur_obj [0] .getContext (2 d);
ctx.beginPath ();
ctx。strokeStyle=cur_cir_color;
ctx.lineWidth=cur_line_w;
ctx。弧(cur_cir_r/2, cur_cir_r/2, cur_cir_r/2, 0, Math.PI *(百分比/100)* 360/180,假);
ctx.stroke ();
}
});
};
})(jQuery);
调用方式:
$(函数(){
$ (' .perCanvas ') .drawCanvasPercent ();
});
之前
也给出html页面代码吧:
& lt; !doctype html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元http-equiv=霸幼ⅰ蹦谌?皀o - cache”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0,user-scalable=不”/比;
& lt;元名称=癴ormat-detection”内容=暗缁?不”/比;
& lt;元名称=癮pple-mobile-web-app-capable”内容=" yes "/比;
& lt;元名称==昂谏?癮pple-mobile-web-app-status-bar-style”内容比;
& lt; title> demo01
& lt;风格类型=" text/css "比;
div{保证金:。1 rem .2rem;背景:# eee;填充:.3rem}
div跨度{显示:块;浮动:没错,保证金:。22 rem 2 rem 0 0;字体大小:.4rem;字体类型:微软yahei}
div帆布{
-webkit-transform: rotateZ(-270度);
变换:rotateZ(-270度);
-webkit-animation: ani01 1缓解0;
动画:ani01 1缓解0;
}
@-webkit-keyframes ani01 {
0% {
-webkit-transform:规模(5。5)rotateZ(-270度);
变换:规模(5。5)rotateZ(-270度);
}
100% {
-webkit-transform:规模(1,1)rotateZ(-90度);
变换:规模(1,1)rotateZ(-90度);
}
}
@keyframes ani01 {
0% {
-webkit-transform:规模(5。5)rotateZ(-270度);
变换:规模(5。5)rotateZ(-270度);
}
100% {
-webkit-transform:规模(1,1)rotateZ(-90度);
变换:规模(1,1)rotateZ(-90度);
}
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div>
& lt;帆布data-percent==皃erCanvas”比“80”类;
您的浏览器不支持帆布标签。
& lt;/canvas>
& lt; span>第一章:进度80% & lt;/span>
& lt;/div>
& lt; div>
& lt;帆布data-percent=?0”class=皃erCanvas”比;
您的浏览器不支持帆布标签。
& lt;/canvas>
& lt; span>第一章:进度50% & lt;/span>
& lt;/div>
& lt; div>
& lt;帆布data-percent==皃erCanvas”比“75”类;
您的浏览器不支持帆布标签。
& lt;/canvas>
& lt; span>第一章:进度75% & lt;/span>
& lt;/div>
& lt; div>
& lt;帆布data-percent=?5”class=皃erCanvas”比;
您的浏览器不支持帆布标签。
& lt;/canvas>
& lt; span>第一章:进度35% & lt;/span>
& lt;/div>
& lt; div>
& lt;帆布data-percent==皃erCanvas”比“95”类;
您的浏览器不支持帆布标签。
& lt;/canvas>
& lt; span>第一章:进度95% & lt;/span>
& lt;/div>
& lt; div>
& lt;帆布data-percent=?3”class=皃erCanvas”比;
您的浏览器不支持帆布标签。
& lt;/canvas>
& lt; span>第一章:进度13% & lt;/span>
& lt;/div>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/flexible.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jquery-1.7.2.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jq-canvaspercent.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
$(函数(){
$ (' .perCanvas ') .drawCanvasPercent ();
});
& lt;/script>
& lt;/body>
& lt;/html>
