canvas多彩粒子星空背景
2024-06-08 16:58:36
HTML5 canvas 实现多颜色粒子星空页面背景，喜欢的可以收藏。自己可以定义颜色，粒子透明度，粒子数量，粒子大小。
预览效果图如下：
1.获取canvas上下文，并且动态设置canvas尺寸和屏幕大小一样。
var canvas = document.getElementById('canvas')var viewW = window.innerWidthvar viewH = window.innerHeightcanvas.width = viewWcanvas.height = viewHvar ctx = canvas.getContext('2d')ctx.save()2.定义粒子参数。
number: 粒子数量
maxDot: 粒子最大半径
array: 记录每个粒子的属性
var dots = {number: 300,maxDot: 30, array: []
}3.定义别的参数。
isOne: 是否是第一次画
step: 每次运行的距离
var isOne = true var step = 0.3 var x = 0 var y = 0 var x1 = 0 var y1 = 0
4.生成随机颜色。
function generateRandomColors() {var color1 = Math.random() * 255 || 1,color2 = Math.random() * 255 || 1,color3 = Math.random() * 255 || 1,color4 = Math.random() * 1 || 0.1;return `rgba(${color1},${color2},${color3},${color4})`}5.画粒子和线条。
function drawDots() {ctx.clearRect(0, 0, viewW, viewH)ctx.fillStyle = '#000'ctx.fillRect(0, 0, viewW, viewH)for (var i = 0; i < dots.number; i++) {var dotR,dotX,dotY,dotC,dot_X = 0.3,dot_Y = 0;if (isOne) {dotR = Math.round(Math.random() * dots.maxDot) || 1;dotX = Math.round(Math.random() * viewW);dotY = Math.round(Math.random() * viewH);dotC = generateRandomColors();if (Math.round(Math.random()) == 1) {dot_X = 0.3} else {dot_X = -0.3}if (Math.round(Math.random()) == 1) {dot_Y = 0.3} else {dot_Y = -0.3}dots.array.push({dotR,dotX,dotY,dotC,dot_X,dot_Y})if (i == 0) {x = dotX;y = dotY;}if (i == 2) {x1 = dotX;y1 = dotY;}} else {if (dots.array[i].dotX + dots.array[i].dot_X > viewW) {dots.array[i].dot_X = -0.3}if (dots.array[i].dotX + dots.array[i].dot_X < 0) {dots.array[i].dot_X = 0.3}if (dots.array[i].dotY + dots.array[i].dot_Y > viewH) {dots.array[i].dot_Y = -0.3}if (dots.array[i].dotY + dots.array[i].dot_Y < 0) {dots.array[i].dot_Y = 0.3}dots.array[i].dotX += dots.array[i].dot_Xdots.array[i].dotY += dots.array[i].dot_YdotX = dots.array[i].dotX;dotY = dots.array[i].dotY;dotR = dots.array[i].dotR;dotC = dots.array[i].dotC;ctx.beginPath();ctx.fillStyle = dotC;ctx.arc(dotX, dotY, dotR, 0, Math.PI * 2);ctx.fill()if (Math.abs(x - dots.array[i].dotX) < 500 && Math.abs(y - dots.array[i].dotY) < 500) {ctx.strokeStyle = dotCctx.moveTo(x, y)ctx.lineTo(dots.array[i].dotX, dots.array[i].dotY)ctx.stroke()}if (Math.abs(x1 - dots.array[i].dotX) < 200 && Math.abs(y1 - dots.array[i].dotY) < 200) {ctx.strokeStyle = dotCctx.moveTo(x1, y1)ctx.lineTo(dots.array[i].dotX, dots.array[i].dotY)ctx.stroke()}}}if (isOne) {isOne = false}ctx.restore()requestAnimationFrame(drawDots)}源码：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>粒子</title>
7 <style>
8 * {
9 padding: 0;
10 margin: 0;
11 overflow: hidden;
12 }
13 </style>
14 </head>
15
16 <body>
17 <canvas id="canvas"></canvas>
18 <script>
19 var canvas = document.getElementById('canvas')
20 var viewW = window.innerWidth
21 var viewH = window.innerHeight
22
23 canvas.width = viewW
24 canvas.height = viewH
25 var ctx = canvas.getContext('2d')
26 ctx.save()
27 // 原型粒子对象参数
28 var dots = {
29 number: 300,
30 maxDot: 30,
31 array: []
32 }
33 var isOne = true
34 var step = 0.3
35 var x = 0
36 var y = 0
37 var x1 = 0
38 var y1 = 0
39 drawDots()
40
41 // 画粒子
42 function drawDots() {
43 ctx.clearRect(0, 0, viewW, viewH)
44 ctx.fillStyle = '#000'
45 ctx.fillRect(0, 0, viewW, viewH)
46
47 for (var i = 0; i < dots.number; i++) {
48 var dotR,
49 dotX,
50 dotY,
51 dotC,
52 dot_X = 0.3,
53 dot_Y = 0;
54 if (isOne) {
55 dotR = Math.round(Math.random() * dots.maxDot) || 1;
56 dotX = Math.round(Math.random() * viewW);
57 dotY = Math.round(Math.random() * viewH);
58 dotC = generateRandomColors();
59 if (Math.round(Math.random()) == 1) {
60 dot_X = 0.3
61 } else {
62 dot_X = -0.3
63 }
64 if (Math.round(Math.random()) == 1) {
65 dot_Y = 0.3
66 } else {
67 dot_Y = -0.3
68 }
69 dots.array.push({
70 dotR,
71 dotX,
72 dotY,
73 dotC,
74 dot_X,
75 dot_Y
76 })
77 if (i == 0) {
78 x = dotX;
79 y = dotY;
80 }
81 if (i == 2) {
82 x1 = dotX;
83 y1 = dotY;
84 }
85
86 } else {
87
88 if (dots.array[i].dotX + dots.array[i].dot_X > viewW) {
89 dots.array[i].dot_X = -0.3
90 }
91 if (dots.array[i].dotX + dots.array[i].dot_X < 0) {
92 dots.array[i].dot_X = 0.3
93 }
94 if (dots.array[i].dotY + dots.array[i].dot_Y > viewH) {
95 dots.array[i].dot_Y = -0.3
96 }
97 if (dots.array[i].dotY + dots.array[i].dot_Y < 0) {
98 dots.array[i].dot_Y = 0.3
99 }
100 dots.array[i].dotX += dots.array[i].dot_X
101 dots.array[i].dotY += dots.array[i].dot_Y
102 dotX = dots.array[i].dotX;
103 dotY = dots.array[i].dotY;
104 dotR = dots.array[i].dotR;
105 dotC = dots.array[i].dotC;
106 ctx.beginPath();
107 ctx.fillStyle = dotC;
108 ctx.arc(dotX, dotY, dotR, 0, Math.PI * 2);
109 ctx.fill()
110 if (Math.abs(x - dots.array[i].dotX) < 500 && Math.abs(y - dots.array[i].dotY) < 500) {
111 ctx.strokeStyle = dotC
112 ctx.moveTo(x, y)
113 ctx.lineTo(dots.array[i].dotX, dots.array[i].dotY)
114 ctx.stroke()
115 }
116 if (Math.abs(x1 - dots.array[i].dotX) < 200 && Math.abs(y1 - dots.array[i].dotY) < 200) {
117 ctx.strokeStyle = dotC
118 ctx.moveTo(x1, y1)
119 ctx.lineTo(dots.array[i].dotX, dots.array[i].dotY)
120 ctx.stroke()
121 }
122 }
123 }
124
125 if (isOne) {
126 isOne = false
127 }
128 ctx.restore()
129 requestAnimationFrame(drawDots)
130 }
131 // 生成随机颜色
132 function generateRandomColors() {
133 var color1 = Math.random() * 255 || 1,
134 color2 = Math.random() * 255 || 1,
135 color3 = Math.random() * 255 || 1,
136 color4 = Math.random() * 1 || 0.1;
137 return `rgba(${color1},${color2},${color3},${color4})`
138 }
139 </script>
140 </body>
141
142 </html>View Code
转载于:https://www.cnblogs.com/it-xiong/p/11158878.html
canvas多彩粒子星空背景相关推荐
- Canvas实现网页星空背景粒子动效跟随光标
目 录 1. 设计思路 2. 星空背景图片 3. 页面代码 4. 效果图 1. 设计思路 1. 利用样式插入星空背景图片: 2.设置窗口改变时自动修改画布大小(自适应): 3. 编写随机函数(随机数 ...
- 粒子背景php,html5+canvas圆形粒子移动背景动画特效
html5+canvas圆形粒子移动背景动画特效 this.update = function () { var lastPoint = { x: _this.x, y: _this.y }; // ...
- canvas太空粒子科技背景
下载地址使用canvas实现的粒子动画效果,结合太空背景图片更显科技感,不错的canvas网页粒子动画背景. dd:
- html5星空效果图,HTML5 canvas炫酷星空背景特效
jquery-warpdrive-plugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的jquery插件.这个星空背景特效可通过配置参数进行灵活的配置,可用鼠标进行互动. 使用方法 ...
- 『 canvas 特效』一文教你绘制绚丽的星空背景 TS + ES6
介绍 很久没有写关于 canvas 效果的文章了,刚好最近又学到了一个新的特效,使用 canvas 绘制多层次动态星空背景,今天就分享给大家.首先我们依旧来看一下最终实现的效果,如图所示: 由于录制 ...
- html 星空效果,html5 canvas炫酷旋转银河系星空背景特效
这是一款html5 canvas炫酷旋转银河系星空背景特效.该特效通过canvas来绘制银河系星盘,并制作星系旋转的效果,非常炫酷. 使用方法 HTML结构 该旋转银河系星空背景特效的HTML结果只需 ...
- html画星空,html5 canvas绘制全屏的星空背景动画特效
特效描述:html5 canvas绘制 全屏星空背景 动画特效.html5 canvas背景动画,星空动画.连线区域跟随鼠标移动,外加碰壁检测 代码结构 1. 引入JS 2. HTML代码 var m ...
- html+canvas 星空背景案例
话不多说,上完整代码: <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
- html5 星空扩散效果,HTML5 canvas实现炫酷旋转银河系星空背景特效解析
简要教程 这是一款html5 canvas炫酷旋转银河系星空背景特效.该特效通过canvas来绘制银河系星盘,并制作星系旋转的效果,非常炫酷. 使用方法 HTML结构 该旋转银河系星空背景特效的HTM ...
最新文章
- PHP使用BC Math 函数处理浮点运算问题
- Microsoft Visual Studio 2012 添加实体数据模型
- Java中数组的length属性
- java instanceof运算符_Java instanceof 运算符的使用方法
- String类中不同拼接方式
- [Leedcode][JAVA][第155题][最小栈][基本类型包装类]
- 【Mybatis-Plus】(四)分页、乐观锁插件 通用枚举 多数据源
- Java基础---分支结构（if--else / switch---case）
- Android笔记 使用AIDL和远程服务实现进程通信
- 解封装(四):avformat_find_stream_info探测获取封装上下文并打印
- UART通讯协议(四)数据接收帧间隔
- C#用串口接收事件接不全数据的处理
- 5.企业应用架构模式 --- 并发
- python算p值,python实现计算两组数据P值的方法
- 斯坦福、康奈尔都推荐的量子计算课程教材：《量子计算》
- Android修行手册 - ConstraintLayout示例
- ast自动扣webpack脚本实战
- egg+vue+mongodb实践开发在线文档管理平台——水墨文档
- Lumion 11软件介绍
- Android App Bundle 和Unity AAB BundleTools