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做点不一样的动画. 首先来看下效果 ...
随机推荐
- CORSFilter
import java.io.IOException; import javax.servlet.Filter;import javax.servlet.FilterChain;import java ...
- 让你的sublime text写C代码 (sublime text 2 配置构建C开发环境)
原则 1. 首先你要配置能够编译C++/C环境 2. window中配置该执行环境的环境变量,能够全局使用 3. sublime Text创建新的构建机制.并设置用改全局编译环境 具体过程 能够编译C ...
- Shuttle ESB（六）——在工程中的应用
假设你可能浏览在前面几篇文章ESB介绍,我相信,在这篇文章中,你会发现很多共鸣. 虽然.市面上开源的ESB确实很之多.像Java中的Mule ESB.Jboss ESB:.Net中的NServiceB ...
- Android 混淆代码汇总
为了防止别人对自己被盗的劳动,混淆代码可以被反编译可以有效地防止,以下在下面的代码混乱总结的步骤: 1. 大家可能已经注意到一个新的项目将在下面看到的物品都有这个proguard-project.tx ...
- 1-9 RHEL7-文件权限管理
本节所讲内容: 文件的基本权限:r w x (UGO+ACL) 文件的高级权限:suid sgid sticky 第1章 文件的基本权限 1.1 权限的作用 通过对文件设定权限可以达到以下三种访问限制 ...
- liunx 常用操作命令
1.复制粘贴命令:在一行的任何位置按下yy,y是yanked拷贝的意思,然后去想粘贴的位置按下p即可.p是粘贴的意思. 2.如果想复制3行的话,按下3yy,就复制3行,如果想复制多行的话,直接按数字可 ...
- C#字符串类型
C#字符串类型(string)是一种引用类型,是System.String的别名,表示Unicode字符串. 两种表示方法: 1.“C#” 直接用双引号括起来. 2.使用@,@“c:\test”,可以 ...
- 年度调查 看看 2016 年 Go 语言调查结果
Go 语言官方博客公布了 2016 年 Go 语言使用调查. 在 3,595 名被调查者中,89% 称他们在工作中或工作之外用 Go 编程:63% 称他们的工作是 Web 开发,但只有 9% 的人只从 ...
- 青云QingCloud黄允松：最高效的研发管理就是没有管理
摘要: 对于底层技术创新而言,没有管理是最好的管理,小规模作战,快速试错,迅速转变方向,迭代周期一定要短. 钛媒体注:钛媒体.商业价值联合主办的第五届“MIIC移动互联网创新大会”如期举行.2015 ...
- DLL里面socket（Delphi的代码）
http://hi.baidu.com/game_base/item/f617e4136414148889a956ed 本文简单介绍了当前Windows支持的各种Socket I/O模型,如果你发 ...