canvas多彩粒子星空背景
HTML5 canvas 实现多颜色粒子星空页面背景，喜欢的可以收藏。自己可以定义颜色，粒子透明度，粒子数量，粒子大小。
预览效果图如下：
1.获取canvas上下文，并且动态设置canvas尺寸和屏幕大小一样。
var canvas = document.getElementById('canvas')
var viewW = window.innerWidth
var viewH = window.innerHeight
canvas.width = viewW
canvas.height = viewH
var ctx = canvas.getContext('2d')
ctx.save()
2.定义粒子参数。
number: 粒子数量
maxDot: 粒子最大半径
array: 记录每个粒子的属性
var dots = {
number: ,
maxDot: ,
array: []
}
3.定义别的参数。
isOne: 是否是第一次画
step: 每次运行的距离
var isOne = true
var step = 0.3
var x =
var y =
var x1 =
var y1 =
4.生成随机颜色。
function generateRandomColors() {
var color1 = Math.random() * || ,
color2 = Math.random() * || ,
color3 = Math.random() * || ,
color4 = Math.random() * || 0.1;
return `rgba(${color1},${color2},${color3},${color4})`
}
5.画粒子和线条。
function drawDots() {
ctx.clearRect(, , viewW, viewH)
ctx.fillStyle = '#000'
ctx.fillRect(, , viewW, viewH)
for (var i = ; i < dots.number; i++) {
var dotR,
dotX,
dotY,
dotC,
dot_X = 0.3,
dot_Y = ;
if (isOne) {
dotR = Math.round(Math.random() * dots.maxDot) || ;
dotX = Math.round(Math.random() * viewW);
dotY = Math.round(Math.random() * viewH);
dotC = generateRandomColors();
if (Math.round(Math.random()) == ) {
dot_X = 0.3
} else {
dot_X = -0.3
}
if (Math.round(Math.random()) == ) {
dot_Y = 0.3
} else {
dot_Y = -0.3
}
dots.array.push({
dotR,
dotX,
dotY,
dotC,
dot_X,
dot_Y
})
if (i == ) {
x = dotX;
y = dotY;
}
if (i == ) {
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 < ) {
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 < ) {
dots.array[i].dot_Y = 0.3
}
dots.array[i].dotX += dots.array[i].dot_X
dots.array[i].dotY += dots.array[i].dot_Y
dotX = 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, , Math.PI * );
ctx.fill()
if (Math.abs(x - dots.array[i].dotX) < && Math.abs(y - dots.array[i].dotY) < ) {
ctx.strokeStyle = dotC
ctx.moveTo(x, y)
ctx.lineTo(dots.array[i].dotX, dots.array[i].dotY)
ctx.stroke()
}
if (Math.abs(x1 - dots.array[i].dotX) < && Math.abs(y1 - dots.array[i].dotY) < ) {
ctx.strokeStyle = dotC
ctx.moveTo(x1, y1)
ctx.lineTo(dots.array[i].dotX, dots.array[i].dotY)
ctx.stroke()
}
}
}
if (isOne) {
isOne = false
}
ctx.restore()
requestAnimationFrame(drawDots)
}
源码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>粒子</title>
<style>
* {
padding: ;
margin: ;
overflow: hidden;
}
</style>
</head> <body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas')
var viewW = window.innerWidth
var viewH = window.innerHeight canvas.width = viewW
canvas.height = viewH
var ctx = canvas.getContext('2d')
ctx.save()
// 原型粒子对象参数
var dots = {
number: ,
maxDot: ,
array: []
}
var isOne = true
var step = 0.3
var x =
var y =
var x1 =
var y1 =
drawDots() // 画粒子
function drawDots() {
ctx.clearRect(, , viewW, viewH)
ctx.fillStyle = '#000'
ctx.fillRect(, , viewW, viewH) for (var i = ; i < dots.number; i++) {
var dotR,
dotX,
dotY,
dotC,
dot_X = 0.3,
dot_Y = ;
if (isOne) {
dotR = Math.round(Math.random() * dots.maxDot) || ;
dotX = Math.round(Math.random() * viewW);
dotY = Math.round(Math.random() * viewH);
dotC = generateRandomColors();
if (Math.round(Math.random()) == ) {
dot_X = 0.3
} else {
dot_X = -0.3
}
if (Math.round(Math.random()) == ) {
dot_Y = 0.3
} else {
dot_Y = -0.3
}
dots.array.push({
dotR,
dotX,
dotY,
dotC,
dot_X,
dot_Y
})
if (i == ) {
x = dotX;
y = dotY;
}
if (i == ) {
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 < ) {
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 < ) {
dots.array[i].dot_Y = 0.3
}
dots.array[i].dotX += dots.array[i].dot_X
dots.array[i].dotY += dots.array[i].dot_Y
dotX = 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, , Math.PI * );
ctx.fill()
if (Math.abs(x - dots.array[i].dotX) < && Math.abs(y - dots.array[i].dotY) < ) {
ctx.strokeStyle = dotC
ctx.moveTo(x, y)
ctx.lineTo(dots.array[i].dotX, dots.array[i].dotY)
ctx.stroke()
}
if (Math.abs(x1 - dots.array[i].dotX) < && Math.abs(y1 - dots.array[i].dotY) < ) {
ctx.strokeStyle = dotC
ctx.moveTo(x1, y1)
ctx.lineTo(dots.array[i].dotX, dots.array[i].dotY)
ctx.stroke()
}
}
} if (isOne) {
isOne = false
}
ctx.restore()
requestAnimationFrame(drawDots)
}
// 生成随机颜色
function generateRandomColors() {
var color1 = Math.random() * || ,
color2 = Math.random() * || ,
color3 = Math.random() * || ,
color4 = Math.random() * || 0.1;
return `rgba(${color1},${color2},${color3},${color4})`
}
</script>
</body> </html>
canvas多彩粒子星空背景的更多相关文章
- canvas实现粒子星空连线
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>离 ...
- canvas星空背景特效+CSS旋转相册学习
今天在看帖子的时候,看到了个有趣的css旋转相册,刚好之前做了一个星空背景dome,这里给大家分享下代码: 旋转相册参考:https://blog.csdn.net/gitchatxiaomi/art ...
- 如何把canvas元素作为网站背景总结详解
如何把canvas元素作为网站背景总结详解 一.总结 一句话总结:最简单的做法是绝对定位并且z-index属性设置为负数. 1.如何把canvas元素作为网站背景的两种方法? a.设置层级(本例代码就 ...
- html5 canvas首屏自适应背景动画循环效果代码
模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...
- 弄个知乎的粒子动态背景_实践particles.js
好久没登录知乎,发现他们的登录页面粒子动态效果蛮炫的,查一下代码用了Particles.js基于Canvas画布创建粒子颗粒效果. 上图 上图: 感觉有比格,就照着弄了一个,玩玩. githu ...
- canvas绘制经典星空连线效果
来自:https://segmentfault.com/a/1190000009675230 下面开始coding:先写个canvas标签 <canvas height="620&qu ...
- HTML5 <Canvas>文字粒子化
文字粒子化,额或者叫小圆圈化... 1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...
- canvas放射粒子效果
这个也是别人的代码,就不多介绍了 写了些注释 body { overflow:hidden; margin:0; padding:0; background-color:#222222 } </ ...
- 用Canvas为网页加入动态背景
近期刚刚接到为微信公众帐号"玩转三里屯"制作首页的任务. 考虑到页面仅仅在手机中浏览.并且手机对canvas的支持又很好,所以打算使用canvas做点不一样的动画. 首先来看下效果 ...
随机推荐
- <PC>HP网络共享并创建一个热点问题
郁闷了一年多 你不能使用本地连接的开放热点 网上说的网卡驱动程序,系统设置等.,我们解决不了 原本BIOS节能设置错误 导致在连续主动对自己的有线无线功能被禁用 该LAN\WLAN Switchin ...
- 【v2.x OGE课程 15】 布局相关
1.父亲和儿子的关系 我们可以Entity类看到非常多parent(父)与child(子)这种字眼,这是游戏引擎中常有的概念,简单而言是一种has-a的关系 watermark/2/text/aHR0 ...
- EasyUI-DataGrid多线动态实现选择性合并
jQuery EasyUI有一个非常易于使用的数据列表控件,这是DataGrid控制.某些背景json格式可以传递给在前景中显示的控制,很强大.只要有时需求须要这样即多行合并,如在列表中假设同样的部门 ...
- node express4.x 的安装
4.x开始不再是 一个express就搞定一切了,需要装另外一个部署插件 具体: 跟着<nodejs开发指南>敲npm install -g express, 安装好了,就在linux命令 ...
- JAVASCRIPT高程笔记-------第八章 浏览器BOM对象
8.1 window对象--表示一个浏览器的实例 在全局作用域中声明的任何变量.函数都会变成window对象的属性和方法,与之直接定义window对象的属性的区别是 window.xxx 可以通过 ...
- js 层的显示和隐藏
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- window下golang生成静态库给C语言调用
buidmod为c-archive能在window下生成 ,c-shared则不行 1.golang生成c-archive静态库 main.go package main import "C ...
- C#高性能大容量SOCKET并发（九）：断点续传
原文:C#高性能大容量SOCKET并发(九):断点续传 上传断点续传 断点续传主要是用在上传或下载文件,一般做法是开始上传的时候,服务器返回上次已经上传的大小,如果上传完成,则返回-1:下载开始的时候 ...
- UWP入门（九）-- 枚举和查询文件和文件夹
原文:UWP入门(九)-- 枚举和查询文件和文件夹 核心 API 所在的命名空间: Windows.Storage Windows.Storage.Streams Windows.Storage.Pi ...
- Anbox —— 在 Linux 系统中运行 Android 应用
具有以下特性: 没有限制:由于 Anbox 运行着整个 Android 系统,所以理论上任何应用都可以在其中运行 安全:Anbox 将 Android APP 放进一个密封的盒子中,无需直接访问硬件或 ...