1. 程式人生 > >使用jquery-circle-progress繪製canvas漸變環形進度條

使用jquery-circle-progress繪製canvas漸變環形進度條

本文介紹如何使用jquery-circle-progress繪製canvas漸變環形進度條。

先引入檔案:

<script src="jquery-1.11.0.min.js"></script>
<script src="circle-progress.js"></script>
再建立html元素:
<div id="circle_step1"></div>

根據元素的id選擇器繪製進度條:

$('#circle_step'+num).circleProgress({
		    value: 0.98,//你需要展示的值,值從0.0到1.0,預設值為0
		    size: 155,//環形圖的大小,單位畫素,預設值100
		    startAngle:-1.57,//初始角度,預設值為-Math.PI
		    reverse:false,//是否反向繪製圓弧和動畫,預設值為false
		    lineCap:'round',//圓弧的線頭樣式:"butt"、"round"和"square"。預設值為"butt"
		    thickness:20,//進度條圓弧的寬度。預設它自動為size的1/14大小,你可以設定你需要的值。預設值為auto
		    emptyFill:'rgba(0, 0, 0, .1)',//空圓弧的顏色。預設值為"rgba(0, 0, 0, .1)"
		    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"] }
		        gradient: ["#fece00","#ffa101"]
		    }
		}).on('circle-animation-progress', function(event, progress,stepValue) {//當影象正在繪製時的監聽事件
		    $(this).find('strong').html(String((stepValue*100).toFixed(2)) + '<i>%</i>');
		});

完整程式碼:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery-circle-progress使用指南</title>
<style>

.f-ongoing{color:#f60}
.f-complete{color:#090}
.circle_step_box{width:1200px;margin:0 auto;}
.circle_step{width:155px;height:auto;float:left;margin-left:54px;cursor:pointer;}
.circle_step>div{width:155px;height:155px;position:relative;}
.circle_step>div>strong{font-size:26px;color:#4697f2;position:absolute;top:60px;text-align:center;display:block;width:100%;left:0;}
.circle_step>div>strong>i{font-size:18px;}
.circle_step.active>div>strong{color:#feab11;}
.circle_step>p{font-size:16px;width:130px;text-align:center;margin:0 auto;margin-top:20px;color:#4697f2;}
.circle_step.active>p{color:#feab11;}
.tabscontent.mainDiv{background:#4696ef;width:100%;margin-top:55px;}
.oimg_nav_box{width:1200px;margin:0 auto;}
#oimg_nav{display:block;width:77px;margin-left:40px;}
</style>
<script src="jquery-1.11.0.min.js"></script>
<script src="circle-progress.js"></script>
</head>

<body style="background:#fff">
<!--環形進度條-->
<div class="circle_step_box">
	<div class="circle_step" state='1' press_name='circle_step1' style="margin-left:0;">
		<div id="circle_step1"><strong class="active"></strong></div>
		<p class="active">11111</p>
	</div>
	<div class="circle_step" state='-1' press_name='circle_step2'>
		<div id="circle_step2"><strong></strong></div>
		<p>22222</p>
	</div>
	<div class="circle_step" state='-1' press_name='circle_step3'>
		<div id="circle_step3"><strong></strong></div>
		<p>33333</p>
	</div>
	<div class="circle_step" state='-1' press_name='circle_step4'>
		<div id="circle_step4"><strong></strong></div>
		<p>44444</p>
	</div>
	<div class="circle_step" state='-1' press_name='circle_step5'>
		<div id="circle_step5"><strong></strong></div>
		<p>55555</p>
	</div>
	<div class="circle_step" state='-1' press_name='circle_step6'>
		<div id="circle_step6"><strong></strong></div>
		<p>66666</p>
	</div>
	<h6 class="clear"></h6>
</div>
</body>
<script>
//初始化環形進度條
function create_circle(num,val_num){
	if(num==1){
		$('#circle_step'+num).circleProgress({
		    value: 0.98,//你需要展示的值,值從0.0到1.0,預設值為0
		    size: 155,//環形圖的大小,單位畫素,預設值100
		    startAngle:-1.57,//初始角度,預設值為-Math.PI
		    reverse:false,//是否反向繪製圓弧和動畫,預設值為false
		    lineCap:'round',//圓弧的線頭樣式:"butt"、"round"和"square"。預設值為"butt"
		    thickness:20,//進度條圓弧的寬度。預設它自動為size的1/14大小,你可以設定你需要的值。預設值為auto
		    emptyFill:'rgba(0, 0, 0, .1)',//空圓弧的顏色。預設值為"rgba(0, 0, 0, .1)"
		    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"] }
		        gradient: ["#fece00","#ffa101"]
		    }
		}).on('circle-animation-progress', function(event, progress,stepValue) {//當影象正在繪製時的監聽事件
		    $(this).find('strong').html(String((stepValue*100).toFixed(2)) + '<i>%</i>');
		});
	}else{
		$('#circle_step'+num).circleProgress({
		    value: val_num,
		    size: 155,
		    startAngle:-1.57,
		    reverse:false,
		    lineCap:'round',
		    thickness:20,
		    fill: {
		        gradient: ["#46ccf2","#4696ef"]
		    }
		}).on('circle-animation-progress', function(event, progress,stepValue) {
		    $(this).find('strong').html(String((stepValue*100).toFixed(2)) + '<i>%</i>');
		});
	}
}
create_circle(1,0.96);
create_circle(2,0.75);
create_circle(3,1);
create_circle(4,0.96);
create_circle(5,1);
create_circle(6,1);
//當滑鼠點選環形進度條時
//http://www.htmleaf.com/html5/html5-canvas/201505271918.html
console.log(-Math.PI / 4 * 3);
$('.circle_step').click(function(){
	if($(this).attr('state')=='1'){
		return false;
	}
	//將所有的狀態歸零
	var old=$('.circle_step[state="1"]').attr('state','-1').attr('class','circle_step').attr('press_name');
	$('#'+old).circleProgress({animation: false,fill: {  gradient: ["#46ccf2","#4696ef"]}});
	//新啟用的進度條
	var press_name=$(this).attr('state','1').attr('class','circle_step active').attr('press_name');
	$('#'+press_name).circleProgress({animation:true,fill: {  gradient: ["#fece00","#ffa101"]}});
	//底部指標移動
	//$('#oimg_nav').css('margin-left',40+(press_name.split('circle_step')[1]-1)*209);
	//內容切換
	$('.table_show').eq(press_name.split('circle_step')[1]-1).fadeIn().siblings().fadeOut();
	//標題切換
	var table_title_arr=['11111','22222','33333','44444','55555','66666'];
	$('#table_title').html(table_title_arr[press_name.split('circle_step')[1]-1]);
})
//當滑鼠進入環形進度條時
$('.circle_step').mouseenter(function(){
	if($(this).attr('state')=='1'){
		return false;
	}
	var press_name=$(this).attr('class','circle_step active').attr('press_name');
	$('#'+press_name).circleProgress({animation: false,fill: {  gradient: ["#fece00","#ffa101"]}});
})
//當滑鼠離開環形進度條時
$('.circle_step').mouseleave(function(){
	if($(this).attr('state')=='1'){
		return false;
	}
	var press_name=$(this).attr('class','circle_step').attr('press_name');
	$('#'+press_name).circleProgress({animation: false,fill: {  gradient: ["#46ccf2","#4696ef"]}});
})
</script>
</html>

效果截圖:

如果不需要用到漸變,可使用css3製作單色環形進度條:點選開啟連結