canvas实现网站粒子进度条效果

2017/08/10 00:04
阅读数 351

效果图:

源码:

<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>

 

展开阅读全文
加载中

作者的其它热门文章

打赏
0
1 收藏
分享
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部