canvas漂浮动画

最新推荐文章于 2024-03-16 21:53:03 发布

霜月枫桥

最新推荐文章于 2024-03-16 21:53:03 发布

阅读量1.2k

点赞数 2

分类专栏： Web前台demo小记

本文链接：https://blog.csdn.net/MOONCOM/article/details/78589980

版权

Web前台demo小记专栏收录该内容

22 篇文章 3 订阅

订阅专栏

代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>canvas漂浮动画</title>
	<style>
	body{
		margin:0px;
	}
	canvas{
		display:block;
	}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
	var canHeight=0;	//画布的宽度
	var canWidth=0;		//画布的长度
	var canvas=null;	//画布对象CanvasRenderingContextD
	var mouseTop=0;		//鼠标的实时纵坐标
	var mouseLeft=0;	//鼠标的实时横坐标
	var bubbleArray=[];	//使用数组储存所有的球球对象

	/*初始化画布,使画布的大小充满整个页面*/
	(function(){
		canHeight=window.innerHeight;
		canWidth=window.innerWidth;
		canvas=document.getElementById("canvas").getContext("2d");
		document.getElementById("canvas").height=canHeight;
		document.getElementById("canvas").width=canWidth;
		canvas.fillStyle="#ff0";
		canvas.fillRect(0,0,canWidth,canHeight);
		canvas.fill();
		window.οnresize=arguments.callee;	/*画布大小随窗口的变化而变化*/
	})();

	/*随机数函数*/
	function random(min,max){
		return Math.floor(Math.random()*max+min);
	}

	/*球的对象,拥有初始化init,绘画draw,移动move方法*/
	function Bubble(){}
	Bubble.prototype={
		"init":function(){
			this.x=random(0,canWidth);
			this.y=random(0,canHeight);
			var colorArray=["#58D3F7","#40FF00","#FFFF00","#FF00FF","#FF4000"];
			this.color=colorArray[random(0,5)];
			this.vx=random(-1,3);
			this.vy=random(-1,3);
			this.r=random(1,5);
			this.prer=this.r;
			this.vr=2;
			this.maxr=50;
		},
		"draw":function(){
			canvas.beginPath();
			canvas.fillStyle=this.color;
			canvas.arc(this.x,this.y,this.r,0,Math.PI*2);
			canvas.fill();
		},
		"move":function(){
			this.x=this.x+this.vx;
			this.y=this.y+this.vy;
			if((this.x<=this.r)||(this.x+this.r>=canWidth)){
				this.vx=-this.vx;
			}
			if((this.y<=this.r)||(this.y+this.r>=canHeight)){
				this.vy=-this.vy;
			}

			/*鼠标66范围内,球球变大;超出66范围,球球变小*/
			var inVertical=Math.abs(this.y-mouseTop);      //垂直
			var inHorizontal=Math.abs(this.x-mouseLeft);    //水平
			if((this.r<this.maxr)&&(inVertical<66)&&(inHorizontal<66)){
				this.r+=this.vr;
			}
			if((this.r>this.prer)&&((inVertical>66)||(inHorizontal>66))){
				this.r-=this.vr;
			}

			this.draw();
		},
	};

	/*创造球球的函数*/
	function create(){
		var bubble=new Bubble();
		bubble.init();
		bubble.draw();
		bubbleArray.push(bubble);
	}

	/*循环生成666个球球*/
	for(var i=0;i<666;i++){
		create();
	}

	/*使用计时器控制球球的动态效果*/
	setInterval(function(){
		canvas.clearRect(0,0,canWidth,canHeight);
		for(var item of bubbleArray){
			item.move();
		}
	},1000/30);

	/*获取鼠标的实时纵横坐标位置*/
	document.body.addEventListener("mousemove",function(e){
		mouseTop=e.clientY;
		mouseLeft=e.clientX;
		console.log(mouseTop+":"+mouseLeft);
	});

	</script>
</body>
</html>

效果图: