九、HTML5空间粒子背景动画特效

水深无声 2022-11-15 03:51 187阅读 0赞

### 文章目录 ###

*  九、HTML5空间粒子背景动画特效
 *   *  9.1 图片预览
     *  9.2 index.html代码
     *  9.3 index.js代码
     *  9.4 gameCanvas-3.0.js代码

--------------------

# 九、HTML5空间粒子背景动画特效 #

## 9.1 图片预览 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70_pic_center]

## 9.2 index.html代码 ##

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>HTML5空间粒子背景动画特效</title>
    	</head>
    	<body>
    		<script src='js/gameCanvas-3.0.js'></script>
    		<script src="js/index.js"></script>
    	</body>
    </html>

## 9.3 index.js代码 ##

var gc = new GameCanvas();
    
    var stars = [];
    var circles = [];
    var lineStars = [];
    for (var i = 0; i < 1000; i++) { 
    	stars.push({ 
    		x: Math.random() * width,
    		y: Math.random() * height,
    		radius: Math.random() * 2
    	});
    }
    
    for (var i = 0; i < 100; i++) { 
    	lineStars.push({ 
    		x: Math.random() * width,
    		y: Math.random() * height,
    		lx: 0,
    		ly: 0
    	});
    }
    
    for (var i = 0; i < 250; i++) { 
    	circles.push({ 
    		x: Math.random() * width,
    		y: Math.random() * height,
    		radius: 300,
    		color: "rgba(255, 0, 0, 0.01)"
    	});
    	circles.push({ 
    		x: Math.random() * width,
    		y: Math.random() * height,
    		radius: 300,
    		color: "rgba(0, 0, 255, 0.01)"
    	});
    	if (!(i % 3))
    		circles.push({ 
    			x: Math.random() * width,
    			y: Math.random() * height,
    			radius: 300,
    			color: "rgba(200, 255, 0, 0.01)"
    		});
    }
    
    for (var i = 0; i < 100; i++) { 
    	circles.push({ 
    		x: random_normal() / 6 * width + width / 2,
    		y: random_normal() / 6 * height + height / 2,
    		radius: 200,
    		color: "rgba(255, 255, 255, 0.01)"
    	});
    }
    
    var canvas2 = document.createElement("canvas");
    canvas2.width = width;
    canvas2.height = height;
    var ctx2 = canvas2.getContext("2d");
    ctx2.fillStyle = "rgb(20, 20, 20)";
    ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
    ctx2.globalCompositeOperation = "lighter";
    for (var i = 0; i < circles.length; i++) { 
    	var c = circles[i];
    	ctx2.beginPath();
    	ctx2.arc(c.x, c.y, c.radius, 0, Math.PI * 2);
    	ctx2.fillStyle = c.color;
    	ctx2.fill();
    }
    
    var img = new Image();
    img.src = canvas2.toDataURL();
    
    function loop() { 
    	background("rgb(20, 20, 20)");
    
    	gc.ctx.drawImage(img, 0, 0);
    
    	for (var i = 0; i < stars.length; i++) { 
    		var s = stars[i];
    		rect(s.x, s.y, s.radius * 1.5, s.radius * 1.5, "white");
    
    		s.x += s.radius / 2;
    
    		if (s.x > width) s.x = 0;
    		if (s.x < 0) s.x = width;
    		if (s.y > height) s.y = 0;
    		if (s.y < 0) s.y = height;
    	}
    
    	for (var i = 0; i < lineStars.length; i++) { 
    		var s = lineStars[i];
    		s.x += 25;
    
    		line(s.x, s.y, s.lx, s.ly, "white", "white");
    
    		if (s.x > width) s.x = 0;
    		if (s.x < 0) s.x = width;
    		if (s.y > height) s.y = 0;
    		if (s.y < 0) s.y = height;
    
    		s.lx = s.x;
    		s.ly = s.y;
    
    	}
    
    	function random_normal() { 
    		var u = 0,
    			v = 0;
    		while (u === 0) u = Math.random(); //Converting [0,1) to (0,1)
    		while (v === 0) v = Math.random();
    		return Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
    	}

## 9.4 gameCanvas-3.0.js代码 ##

链接：[分享百度网盘的链接，点击即可下载][Link 1]  
提取码：0258

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/d29b9963ab054b50a4bb2e1e576b87cf.png
[Link 1]: https://pan.baidu.com/s/1kpE5rBENmPo_XIotpL_LNA

发表评论取消回复

表情：

评论列表（有 0 条评论，187人围观）

还没有评论，来说两句吧...

相关阅读

相关 153.炫酷粒子背景特效

效果 (源码网盘地址在最后) ![1b6c12310dd9bda1cebf98a3aeb0f77b.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

偏执的太偏执、/ 2023年01月18日 02:29/ 0 赞/ 131 阅读

相关九、HTML5空间粒子背景动画特效

文章目录九、HTML5空间粒子背景动画特效 9.1 图片预览 9.2 index.html代码 9.3 index.js代

水深无声/ 2022年11月15日 03:51/ 0 赞/ 188 阅读

相关 HTML5霓虹灯烟雾背景js特效

[下载地址][Link 1] HTML5霓虹灯烟雾背景特效是一款基于HTML5 Canvas绘制的全屏烟雾背景动画特效。 ![9d35c7fc53e39edea4f6c0f

缺乏、安全感/ 2022年09月16日 11:20/ 0 赞/ 176 阅读

相关 HTML5球体下落粒子爆炸js特效

[下载地址][Link 1] HTML5球体下落粒子爆炸特效是一款基于HTML5 Canvas实现的全屏白色球体自由落体爆炸粒子动画，彩色粒子爆炸动画特效。 ![03a9d

我就是我/ 2022年09月16日 06:13/ 0 赞/ 164 阅读

相关 Canvas黑色背景粒子HTML5动画

[下载地址][Link 1]Canvas黑色背景粒子HTML5动画特效，一款基于Canvas绘制三角形弹性跳动特效。 ![1631148841.png][] dd: [

电玩女神/ 2022年09月10日 14:22/ 0 赞/ 247 阅读

相关 HTML5 Canvas下雨动画背景

[下载地址][Link 1]Canvas模拟下雨效果，可以当做网页下雨背景，不错的下雨动画特效。 ![1630568787.png][] dd: [Link 1]: h

╰+攻爆jí腚メ/ 2022年09月10日 05:10/ 0 赞/ 272 阅读

相关鼠标跟随闪闪发光html5动画背景js特效

[下载地址][Link 1]鼠标跟随闪闪发光html5动画背景特效 ![1630059290.png][] dd: [Link 1]: https://yy123.in

野性酷女/ 2022年09月09日 06:01/ 0 赞/ 194 阅读

相关 HTML5霓虹灯粒子螺旋动画js特效

[下载地址][Link 1] HTML5霓虹灯粒子螺旋动画特效是一款基于HTML5 Canvas绘制的全屏彩色发光粒子旋转动画特效。 ![ad4d9ae7984d2569d

àì夳堔傛蜴生んèń/ 2022年08月28日 03:57/ 0 赞/ 214 阅读

相关 8款惊艳的HTML5粒子动画特效

HTML5确实非常强大，很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果，粒子动画在HTML5应用中也是比较消耗本地资源的，尤其是CPU，但是有些HTML5粒

小咪咪/ 2022年06月02日 05:10/ 0 赞/ 291 阅读

相关 HTML5特效动画

7、 [HTML5 Canvas 鼠标滑过3D动画背景][HTML5 Canvas _3D] 在网页中我们经常会设置元素的背景，简单点的设置背景颜色，复杂的就设置背

淡淡的烟草味﹌/ 2022年01月29日 08:57/ 0 赞/ 476 阅读