canvas實現網站粒子進度條效果

時間 2019-11-12

原文原文鏈接

效果圖：html

源碼：jquery

<html>
	<title></title>
	<header>
	<script src="jquery-1.8.0.js"></script>
	<script>
		$(document).ready(function(){
			var canvas = document.querySelector("#canvas");
			var ctx = canvas.getContext("2d");
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;

			var proHeight = 10;//進度條高度
			var proWidth = 0.9;//進度條寬度
			var proSpeed = 0.001;//進度條速度
			var num = 4;//粒子數目
			var bgColor = "#4f0e1d";//進度條背景色
			var proColor = "#fff";//進度條進度色
			var initX = canvas.width*(1-proWidth);//初始X座標
			var initY = (canvas.height-proHeight)/2;//初始Y座標
			var currentX = initX;//當前進度x座標
			var scale = 1-proWidth;

			function drawBgProgress(){
				ctx.beginPath();
				ctx.arc(initX,initY,proHeight/20,Math.PI*0.5,Math.PI*1.5,false);
				ctx.moveTo(initX,initY);
				ctx.lineTo(canvas.width*proWidth,initY);
				ctx.arc(canvas.width*proWidth+proHeight,initY,proHeight/20,Math.PI*0.5,Math.PI*1.5,true);
				ctx.closePath();
				ctx.lineWidth = proHeight;
				ctx.strokeStyle = bgColor;
				ctx.stroke();
			}
			function drawProgress(){
				scale += proSpeed;
				if(scale>(proWidth+proSpeed)){
					scale = 1-proWidth;
					drawBgProgress();
				}
				currentX = canvas.width*scale;
				ctx.save();
				ctx.beginPath();
				ctx.arc(initX,initY,proHeight/20,Math.PI*0.5,Math.PI*1.5,false);
				ctx.moveTo(initX,initY);
				ctx.lineTo(currentX,initY);
				ctx.arc(canvas.width*scale+proHeight,initY,proHeight/20,Math.PI*0.5,Math.PI*1.5,true);
				ctx.closePath();

				ctx.lineWidth = proHeight;
				ctx.strokeStyle = proColor;
				ctx.shadowOffsetX = 0;//陰影X軸偏移
				ctx.shadowOffsetY = 0;
				ctx.shadowBlur = 30;
				ctx.shadowColor = 'rgba(255,255,255,0.8)';
				ctx.stroke();
				ctx.restore();
			}
			function drawPartitle(){
				var range = 65;
				for(var i=0;i<num;i++){
					var r=0.5+Math.random()*4;
					ctx.beginPath();
					ctx.arc(currentX-i*20,initY+i*Math.random()*10,r,0,Math.PI*2,false);
					ctx.arc(currentX-i*40,initY-i*Math.random()*30,r,0,Math.PI*2,true);
					ctx.closePath();
					ctx.fillStyle = "#CDA69F";
					ctx.fill();
				}
			}
			function update(){
				ctx.clearRect(0,0,canvas.width,canvas.height);
				drawBgProgress();
				drawProgress();
				drawPartitle();
			}
			setInterval(update,50);
		});
	</script>
	</header>
	<body>
		<canvas class="canvas" id="canvas" style="background:#000;"></canvas>
	</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。