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;