jquery圆环进度条插件

2018-04-16 10:57:43 次阅读稿源：互联网

零七广告

在网络搜到的一个jquery圆环进度条插件，是使用canvas写的，支持纯色、渐变颜色、支持文字逐渐变化、支持定义起始角等一切跟之前我写过的HTML5 Canvas绘制矩形和圆形（圆弧）和canvas绘制旋转的圆环百分比进度条等一切圆弧的属性和方法。

使用方法：

<script src="jquery.min.js"></script><script src="jquery-circle-progress/dist/circle-progress.js"></script><div id="circle"></div><script>    $('#circle').circleProgress({        value: 0.75,        size: 80,        fill: {            gradient: ["red", "orange"]        }    });</script>

选项：

Option	Description
value	必须值，圆环的百分比从0到1. 默认值: `0`
size	圆环大小 Default: `100`
startAngle	初始角度 Default: `-Math.PI`
reverse	是否逆时针 Default: `false`
thickness	圆环的宽度，默认为1/4的大小 Default: `"auto"`
lineCap	Arc line cap: `"butt"`, `"round"` or `"square"` - read more Default: `"butt"`
fill	圆环的填充颜色 - `{ color: "#ff1e41" }` - `{ color: 'rgba(255, 255, 255, .3)' }` - `{ gradient: ["red", "green", "blue"] }` - `{ gradient: [["red", .2], ["green", .3], ["blue", .8]] }` - `{ gradient: [ ... ], gradientAngle: Math.PI / 4 }` - `{ gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }` - `{ image: "http://i.imgur.com/pT0i89v.png" }` - `{ image: imageInstance }` - `{ color: "lime", image: "http://i.imgur.com/pT0i89v.png" }` Default: `{ gradient: ["#3aeabb", "#fdd250"] }`
emptyFill	空白的圆环 Default: `"rgba(0, 0, 0, .1)"`
animation	动画设置 See jQuery animations. You may also set it to `false` Default: `{ duration: 1200, easing: "circleProgressEase" }` `"circleProgressEase"` is just a ease-in-out-cubic easing
animationStartValue	动画默认开始从那个值开始运动。 Default: `0.0`

事件

Event	Handler
`circle-animation-start`	`function(event)`: - `event` - jQuery event
`circle-animation-progress`	`function(event, animationProgress, stepValue)`: - `event` - jQuery event - `animationProgress` - from `0.0` to `1.0` - `stepValue` - current step value: from `0.0` to `value`
`circle-animation-end`	`function(event)`: - `event` - jQuery event

其他：

You can get the <canvas> (but only if the widget is already inited):

$('#circle').circleProgress({ value: 0.5 });var canvas = $('#circle').circleProgress('widget');

You can get the CircleProgress instance:

var instance = $('#circle').data('circle-progress');

You can redraw existing circle (but only if the widget is already inited):

$('#circle').circleProgress({ value: 0.5, fill: { color: 'orange' }});$('#circle').circleProgress('redraw'); // use current configuration and redraw$('#circle').circleProgress(); // alias for 'redraw'$('#circle').circleProgress({ size: 150 }); // set new size and redraw