html进度条圆圈渐变色,HTML5 canvas带渐变色的圆形进度条动画

jquery-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件。该圆形进度条使用的是HTML5 canvas来绘制圆形进度条及其动画效果，进度条使用渐变色来填充，效果非常的酷。

使用方法

$('#circle').circleProgress({

value: 0.75,

size: 80,

fill: {

gradient: ["red", "orange"]

}

});

配置参数

下面是该圆形进度条插件的一些可用参数：

参数

描述

value

这是唯一一个必填参数。值从0.0到1.0，默认值为0

size

canvas的大小，单位像素，默认值100

startAngle

初始角度，默认值为-Math.PI

reverse

是否反向绘制圆弧和动画，默认值为false

thickness

进度条圆弧的宽度。默认它自动为size的1/14大小，你可以设置你需要的值。默认值为auto

lineCap

圆弧的线头样式："butt"、"round"和"square"。详细信息看这里。默认值为"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" }

默认值为{ gradient: ["#3aeabb", "#fdd250"] }

emptyFill

空圆弧的颜色。默认值为"rgba(0, 0, 0, .1)"

animation

动画配置。可以参考jQuery animations。你可以设置为false来禁止动画。默认值：{ duration: 1200, easing: "circleProgressEase" }。"circleProgressEase"是一个ease-in-out-cubic easing动画效果

animationStartValue

默认进度条动画会在0.0开始，结束与value处。调用该参数可以直接动画。如果需要制作反向动画就将animationStartValue的值设置为1.0。你可以指定0.0到1.0之间的任何数值。默认值为0.0

事件

在允许进度条动画的情况下，有三个事件可用。

事件

处理程序

circle-animation-start：

function(event)

-event - jQuery事件

circle-animation-progress

function(event, animationProgress, stepValue)：

-event - jQuery事件

animationProgress - 从0.0到1.0

stepValue - 当前的步长值，从0.0到value

circle-animation-end

function(event)：

-event - jQuery事件

浏览器兼容

该圆形进度条插件使用，所有的现代浏览器都支持该元素，包括IE9+。可以查看Can I Use。

在不支持的浏览器中，插件提供了一些回退代码，如IE8浏览器。

其它

如果进度条组件已经被初始化，你可以获取：

$('#circle').circleProgress({ value: 0.5 });

var canvas = $('#circle').circleProgress('widget');

你可以获取CircleProgress对象实例：

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

如果进度条组件已经被初始化，你可以重新绘制已经存在的圆环：

$('#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

你可以改变默认的参数配置：

$.circleProgress.defaults.size = 50;