在网络搜到的一个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 moreDefault: "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 falseDefault: { 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
You can change the default options:
$.circleProgress.defaults.size = 50;
