canvas简单的粒子效果的实现

很久没有写博文了，今天抽空做了一个canvas的简单粒子效果

需要的基础知识有js的面向对象的基础，

canvas的绘图基础

首先预览一下效果，点我进入

这里我们需要的就是通过定义粒子效果的对象以及粒子基点对象，

通过对对象关系分析来构造对象的基本结构，从而得到了一个简单的粒子效果

下面直接上完整代码，

注释已经添加在代码中了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>粒子效果</title>
		<style type="text/css">
			body{
				background: #000000;
			}
		</style>
	</head>
	<body>
		<canvas id="c" width="1280" height="800"></canvas>
		<script type="text/javascript">
			(function(){
				var c = document.querySelector("#c");
				var ctx = c.getContext("2d");
				//基点兑对象
				function Circle(color,count){
					this.x=0;//基点的x坐标
					this.y=0;//基点的y坐标
					this.r = 25;//基点半径
					this.color = color;//基点的颜色
					this.shadowCount = count;//基点散发的粒子个数
					this.shadows = [];//基点散发的粒子对象集合
					//初始化粒子的方法
					this._circle = function(){
						for(var i=0;i<this.shadowCount;i++){
							this.shadows.push(new Shadow());
						}
					}
					this._circle();
				}
				//基点对象渲染方法
				Circle.prototype.rounder = function(x,y){
					this.x = x;
					this.y = y;
					for(var i=0;i<this.shadows.length;i++){
						this.shadows[i].initShadow(this);
					}
					ctx.beginPath();
					ctx.fillStyle = this.color;
					ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
					ctx.fill();
				}
				//粒子对象
				function Shadow(obj){
					this.jg = Math.random()*30;//渲染粒子的间隔
					this.x = -1000;//粒子的x坐标
					this.y = -1000;//粒子的y坐标
					this.r = -1000;//粒子的半径
					var R = parseInt(Math.random()*256);//颜色的随机数
					var G = parseInt(Math.random()*256);//颜色的随机数
					var B = parseInt(Math.random()*256);//颜色的随机数
					this.color = "rgb("+R+","+G+","+B+")";//粒子颜色
					this.fadeR = 300;//粒子的消失距离
					//粒子移动的角度的弧度值
					var jd = Math.PI/180*(parseInt(Math.random()*360)) 
					//根据粒子角度来计算得到的粒子x与y方向的速度
					this.sx = Math.sin(jd)*this.fadeR/100;
					this.sy = Math.cos(jd)*this.fadeR/100;
				}
				//粒子对象渲染方法
				Shadow.prototype.initShadow=function(obj){
					//由于每个粒子对象是同时绘制，所以定义随机间隔来实现时间差效果
					if(this.jg<0){
						//当数据初始化之后就不再重新对影子赋值
						if(this.x==-1000){
							this.x = obj.x;
						}
						if(this.y==-1000){
							this.y = obj.y;
						}
						if(this.r==-1000){
							this.r = obj.r;
						}
						//只有在对象的半径是正数的时候渲染影子
						if(this.r>0){
							ctx.beginPath();
							ctx.fillStyle = this.color;
							ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
							this.x+=this.sx;
							this.y+=this.sy;
							this.r-=this.fadeR/300;
							ctx.fill();
						}else{
							//当半径失效之后调用初始化方法让粒子重新出现实现单个对象的不规则状态循环
							this.init();
						}
					}else{
						this.jg--;
					}
				}
				//粒子结束后重新初始化
				Shadow.prototype.init = function(){
					this.jg = Math.random()*30;
					this.x = -1000;
					this.y = -1000;
					this.r = -1000;
					var R = parseInt(Math.random()*256);
					var G = parseInt(Math.random()*256);
					var B = parseInt(Math.random()*256);
					this.color = "rgb("+R+","+G+","+B+")";
					this.fadeR = 300;
					var jd = Math.PI/180*(parseInt(Math.random()*360))
					this.sx = Math.sin(jd)*this.fadeR/100;
					this.sy = Math.cos(jd)*this.fadeR/100;
				}
				//实例化本体对象
				var c1 = new Circle("rgba(100,230,140,0.5)",100);
				var x = 0;
				var y = 0;
				//动画启动方法
				function startFill(){
					ctx.clearRect(0,0,c.width,c.height)
					c1.rounder(x,y);
				}
				//鼠标跟踪方法
				c.addEventListener("mousemove",function(e){
					x = e.offsetX;
					y = e.offsetY;
				});
				//开启定时器
				window.setInterval(startFill,17);
			})();
			
		</script>
	</body>
</html>

有兴趣的可以研究一下canvas可以在web环境中实现任何你想要实现的视觉效果

canvas简单的粒子效果的实现

猜你喜欢