canvas 粒子效果

最新推荐文章于 2024-08-19 16:56:14 发布

神奇大叔

最新推荐文章于 2024-08-19 16:56:14 发布

阅读量248

点赞数

分类专栏： HTML5 新特性文章标签： canvas

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103995701

版权

HTML5 新特性专栏收录该内容

14 篇文章 1 订阅

订阅专栏

用到了underscore.js框架
鼠标移动事件
通过类来生成和改变球的位置
通过定时器来清屏后添加球

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src='js/underscore.js'></script>

	<style>
		.canvas{
			border:solid 2px black;
			background-color: black;
		}
	
	
	</style>
</head>
<body>

	<canvas width="1390px" height="700px" class='canvas'>您的浏览器不支持canvas标签,请变更支持canvas的浏览器</canvas>
	<script>
			var	canvas=document.querySelector(".canvas");
			var bi=canvas.getContext('2d');
			var ballArr=[]; //小球数组

			//小球类
				function Ball(x,y)
				{
					this.x=x;
					this.y=y;
					this.r=_.random(5,10);
					this.color=_.sample(['red','orange','yellow','green','cyan','blue','purple']);
					//坐标的增减量
					this.dx=_.random(-4,4);
					this.dy=_.random(-4,4);

					//每有一个小球就放进数组里,为后面多个小球同时操作铺垫
					ballArr.push(this);
				}
				//给所有对象提供共有的画小球原型方法
				Ball.prototype.draw=function()
				{
					//如果小球半径减小到0,就消失不生成
					if(this.r<=0)
					{
						return;
					}
					//画小球
					bi.beginPath();
					bi.arc(this.x,this.y,this.r,0*Math.PI,2*Math.PI,false);
					bi.fillStyle=this.color;
					bi.fill();

					bi.closePath();
				}
				//使鼠标移动时小球位置也改变
				Ball.prototype.update=function()
				{
					this.x+=this.dx;
					this.y+=this.dy;
					this.r-=0.5;
					//如果当前小球半径小于0,则移除
					if(this.r<=0)
					{
						_.without(ballArr,this);
					}
				}
			//鼠标移动时间创建小球
			
			canvas.onmousemove=function(){
				new Ball(event.offsetX,event.offsetY);
			};
			//fps=50;
			setInterval(function(){
				//清屏
				bi.clearRect(0,0,1390,700);
				//划上所有的小球
				_.each(ballArr,function(ele){
					//使鼠标停住时改变小球位置
					ele.update();
					ele.draw();

				})
			},25);

	</script>
	
</body>

</html>