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做点不一样的动画. 首先来看下效果 ...
随机推荐
- angular.js分页代码的实例
对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在 ...
- springboot 配置拦截器
1 有这样一个需求 服务端对部分请求URL需要验证身份.如果验证错误,停止请求,按照既定的数据格式返回:如果验证正确,继续执行请求. 2 需要这样做 1. 将指定格式的请求拦截下来: 2. 获取参数, ...
- WPF路由
举例:窗口-用户控件-布局控件-…-按钮 按钮的点击事件:先由按钮的Click相应,然后….,然后布局控件,然后用户控件,然后窗口类似异常,直到“处理完成”(实际上一般按钮自己处理即可) 路由事件 ...
- Sqlite在.NET下的使用和Sqlite数据库清理
原文:Sqlite在.NET下的使用和Sqlite数据库清理 Sqlite 是一款轻量级的关系型数据库,她的好处我就不详细道来了.本文的初衷是为.net平台的使用者提供帮助. Sqlite有专门为VS ...
- CSS，让100%的宽度，自动减10，让100%的高度，自动减10，可以加减乘除
CSS,让100%的宽度,自动减10,让100%的高度,自动减10,可以加减乘除 实例: .add{ width: calc(100% - 10px); height: calc(100% - 10p ...
- List集合去重方式及效率对比
List集合相信大家在开发过程中几乎都会用到.有时候难免会遇到集合里的数据是重复的,需要进行去除.然而,去重方式有好几种方式,你用的是哪种方式呢?去重方式效率是否是最高效.最优的呢?今天就给大家讲解一 ...
- 【全面解禁!真正的Expression Blend实战开发技巧】第二章 你好，UI设计师
原文:[全面解禁!真正的Expression Blend实战开发技巧]第二章 你好,UI设计师 你好,UI设计师 曾几何时我从没想过要与艺术家打交道,但是Silverlight改变了这一切.UI设计师 ...
- Win8 Metro(C#)数字图像处理--2.60部分彩色保留算法
原文:Win8 Metro(C#)数字图像处理--2.60部分彩色保留算法 [函数名称] 部分彩色保留函数 WriteableBitmap PartialcolorProcess ...
- HTML5离线缓存攻击测试（二）
经过昨天的测试,发现使用离线缓存的网站会被攻击.但是,不使用离线缓存的网站就真的不会受到这样的攻击么? 据我理解,按照标准当浏览器请求manifest文件时,若没有请求到,或者文件发生改变,应当不使用 ...
- 8086 CPU 寄存器简介（超详细，图文并茂）
http://www.cnblogs.com/BoyXiao/archive/2010/11/20/1882716.html