粒子效果

最新推荐文章于 2024-04-16 08:57:44 发布

半成熟、

最新推荐文章于 2024-04-16 08:57:44 发布

阅读量233

点赞数

本文链接：https://blog.csdn.net/bs775926015/article/details/113033451

版权

粒子效果

在这里插入图片描述
粒子效果用javascript写
在HTML中创建一个canvas，是整个屏幕的画布。

		* {
				margin: 0;
				padding: 0;
			}
			
			#canvas {
				border: 1px solid red;
			}
		</style>
	</head>

	<body>
		<canvas id="canvas" width="" height=""></canvas>
	</body>

第二步，在javascript中定义画布，给画布一个指定的宽度和高度。

var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		// 给canvas 一个指定的宽度 和高度
		canvas.width = innerWidth;
		canvas.height = innerHeight;

第三步，给粒子创建一个数组 arcarr【】

var arcarr = [];

第四步，给粒子随机大小，随机位置，随机颜色以及速度创建一个函数
设置小圆圆数量超过500个时，则自动停止添加小圆圆

var max = 500;
			if(arcarr.length >= max) {
				clearInterval(arctimer);
			}

给小圆圆随机位置，大小，颜色，速度添加随机函数Math.floor(Math.random())。

var cx = Math.floor(Math.random() * 200 + 400);
			var cy = Math.floor(Math.random() * 200 + 400);
			var cr = Math.floor(Math.random() * 10 + 1);
			var r = Math.floor(Math.random() * 255);
			var g = Math.floor(Math.random() * 255);
			var b = Math.floor(Math.random() * 255);
			var a = Math.random();
			var bg = "rgba(" + r + "," + g + "," + b + "," + a + ")";
			//加速度
			var sx = Math.floor(-5 + Math.random() * 10);
			var sy = Math.floor(-5 + Math.random() * 10);

给小圆圆各项属性创建obj对象,以便添加小圆圆属性,当小圆圆的速度不等于0时创建增函数增加小圆圆。

var obj = {
				cx: cx,
				cy: cy,
				cr: cr,
				bg: bg,
				sx: sx,
				sy: sy
			}

			if(sx != 0 || sy != 0) {
				arcarr.push(obj);
			}

添加定时函数，整体如下

function create() {
			//创建50个小圆圈
			var max = 500;
			if(arcarr.length >= max) {
				clearInterval(arctimer);
			}
			var cx = Math.floor(Math.random() * 200 + 400);
			var cy = Math.floor(Math.random() * 200 + 400);
			var cr = Math.floor(Math.random() * 10 + 1);
			var r = Math.floor(Math.random() * 255);
			var g = Math.floor(Math.random() * 255);
			var b = Math.floor(Math.random() * 255);
			var a = Math.random();
			var bg = "rgba(" + r + "," + g + "," + b + "," + a + ")";
			//加速度
			var sx = Math.floor(-5 + Math.random() * 10);
			var sy = Math.floor(-5 + Math.random() * 10);

			var obj = {
				cx: cx,
				cy: cy,
				cr: cr,
				bg: bg,
				sx: sx,
				sy: sy
			}

			if(sx != 0 || sy != 0) {
				arcarr.push(obj);
			}
		}
		var arctimer = setInterval(create, 30);

第五步，给粒子添加一个画粒子，以及粒子碰到屏幕的边反向走的函数
粒子碰到屏幕的边反向用if判断，假如粒子坐标加粒子本身大小超过屏幕的宽或粒子坐标减去粒子本身大小小于0则反向，这时给粒子的速度乘以-1，实现碰到边反向。

function show() {
			context.clearRect(0,0,canvas.width,canvas.height);
			for(var i = 0; i < arcarr.length; i++) {
				if(arcarr[i].cx+arcarr[i].cr >= canvas.width||arcarr[i].cx-arcarr[i].cr<=0){
					arcarr[i].sx = arcarr[i].sx *-1;
				}
				if(arcarr[i].cy+arcarr[i].cr >= canvas.height||arcarr[i].cy-arcarr[i].cr<=0){
					arcarr[i].sy = arcarr[i].sy *-1;
				}
				arcarr[i].cx += arcarr[i].sx;
				arcarr[i].cy += arcarr[i].sy;
				context.beginPath();
				context.arc(arcarr[i].cx, arcarr[i].cy,arcarr[i].cr, 0, 2 * Math.PI, false);
				context.fillStyle = arcarr[i].bg;
				context.fill();
				context.closePath();
			}

		}
		var timer = setInterval(show, 30);

一个简单的粒子效果完成了

半成熟、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
粒子效果

粒子效果粒子效果用javascript写在HTML中创建一个canvas，是整个屏幕的画布。 * { margin: 0; padding: 0; } #canvas { border: 1px solid red; } </style> </head> <body> <canvas id="canvas" width="" height=""></canvas> <
复制链接

扫一扫