1. 程式人生 > >基於canvas的圓形進度條

基於canvas的圓形進度條

建立HTML檔案,CSS檔案和JavaScript檔案,並引入jquery。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="full-screen" content="yes">
		<meta name="browsermode" content="application">
    	<meta name="x5-orientation" content="portrait">
		<title>圓形進度條載入</title>
	</head>
	
		<link rel="stylesheet" href="css/circle.css">
		
	<body>
		
		
		<div class="periphery">
			
			<canvas id="circleCanvas" width="200" height="200"></canvas>
			
			<!--請用img標籤新增圖片資源進行測試,越多越好,為避免看不到效果請把canvas層級調高-->
			<img src='a.jpg'/>
			<img src='a.jpg'/>
			<img src='a.jpg'/>
			<img src='a.jpg'/>
			
		</div>
		
		
		
		
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/circle.js" ></script>
	</body>
	
</html>

  css樣式,自行調整大小或位置

/*初始化頁面*/
*{
	padding:0;
	margin:0;
	border:0;
}

body,html{
	width:100%;
	height:100%;
	overflow: hidden;
}


.periphery{
	width:100%;
	height:100%;
	position: relative;
	background: #ccc;
}

#circleCanvas{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

.periphery img{
	opacity: 0;
}

  接下來是核心功能實現,採用js繪製並渲染canvas

function drawCircleLoading(ctx,progress){
	ctx.clearRect(0,0,200,200);
	ctx.beginPath();
	ctx.lineWidth=10;
	ctx.strokeStyle='rgba(50,207,224,1)';
	ctx.arc(100,100,40,0,2 * Math.PI,false);
	ctx.stroke();
	ctx.beginPath();
	ctx.lineWidth=4;
	ctx.strokeStyle='rgba(50,207,224,1)';
	ctx.arc(100,100,50,0,2 * Math.PI,false);
	ctx.stroke();
	ctx.beginPath();
	ctx.lineWidth=4;
	ctx.strokeStyle='rgba(0,0,0,0.2)';
	ctx.arc(100,100,50,0,2 * Math.PI,false);
	ctx.stroke();
	ctx.beginPath();
	ctx.save()
	ctx.translate(0,200);
	ctx.rotate(270 * Math.PI/180);
	ctx.lineWidth=10;
	ctx.strokeStyle='rgba(0,0,0,0.2)';
	ctx.arc(100,100,40,0,1.9999 * Math.PI * (progress * 0.01),true);
	ctx.stroke();
	ctx.restore();
	ctx.beginPath();
	ctx.font="18px Arial";
	ctx.fillStyle="#0000ff";
	ctx.fillText(progress+"%",100 - (ctx.measureText(progress+"%").width) / 2,100 + 6);
	ctx.fill();
	ctx.closePath();
}

//根據圖片load進度條
function loadingAsImgLength(){
	
		//建立Canvas
		var c=document.getElementById("circleCanvas");
		var ctx=c.getContext("2d");
	
	    var precent= -1;
    	var imglen = $('img').length;
        for(var i = 0; i < imglen; i++){
            var imgs = new Image();
            imgs.src = $('img').eq(i).attr("src");
            imgs.onload = function () {
            	precent= precent+=1;
            	var num = parseInt((precent/(imglen-1))*100);
            	var j  = num;
				(function (j) {
					setTimeout(function () {
						//開始載入
						drawCircleLoading(ctx,j);
						console.log(j)
		    			if(j>=100){
		    				j = 100;
		    				drawCircleLoading(ctx,j);
		    				setTimeout(function(){
		    					
		    					//這裡放載入結束後的操作程式碼
		    					
//		    					alert("over");
		    					
                          		
		    				},600)
		    				return;
		    			}
		    		},j*20)
					
				})(j)

            }
        }
        
}



$(function(){
	
	loadingAsImgLength();
	
	
})

  注意事項:請保證圖片路徑正確,並儘可能新增多的img標籤來確保看到效果。

  最終實現的效果圖: