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多彩粒子星空背景的更多相关文章

  1. canvas实现粒子星空连线

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>离 ...

  2. canvas星空背景特效+CSS旋转相册学习

    今天在看帖子的时候,看到了个有趣的css旋转相册,刚好之前做了一个星空背景dome,这里给大家分享下代码: 旋转相册参考:https://blog.csdn.net/gitchatxiaomi/art ...

  3. 如何把canvas元素作为网站背景总结详解

    如何把canvas元素作为网站背景总结详解 一.总结 一句话总结:最简单的做法是绝对定位并且z-index属性设置为负数. 1.如何把canvas元素作为网站背景的两种方法? a.设置层级(本例代码就 ...

  4. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  5. 弄个知乎的粒子动态背景_实践particles.js

    好久没登录知乎,发现他们的登录页面粒子动态效果蛮炫的,查一下代码用了Particles.js基于Canvas画布创建粒子颗粒效果. 上图 上图:   感觉有比格,就照着弄了一个,玩玩.   githu ...

  6. canvas绘制经典星空连线效果

    来自:https://segmentfault.com/a/1190000009675230 下面开始coding:先写个canvas标签 <canvas height="620&qu ...

  7. HTML5 <Canvas>文字粒子化

    文字粒子化,额或者叫小圆圈化... 1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...

  8. canvas放射粒子效果

    这个也是别人的代码,就不多介绍了 写了些注释 body { overflow:hidden; margin:0; padding:0; background-color:#222222 } </ ...

  9. 用Canvas为网页加入动态背景

    近期刚刚接到为微信公众帐号"玩转三里屯"制作首页的任务. 考虑到页面仅仅在手机中浏览.并且手机对canvas的支持又很好,所以打算使用canvas做点不一样的动画. 首先来看下效果 ...

随机推荐

  1. WPF编游戏系列 之五 数据绑定

    原文:WPF编游戏系列 之五 数据绑定        在上一篇通过用户控件将重复使用的控件封装为一个控件组,大大减少了C#代码数量,本篇继续对该控件组进行数据绑定,节省为每个控件赋值的工作.对于数据绑 ...

  2. JPlayer-MP3播放器(带播放列表)

    第一篇随笔,写的不好的地方,各位不要见笑.其他的也不多说了,下面是我在工作中用的一个基于JQuery开源的插件,官方地址:http://www.jplayer.org/.先看下要实现的效果图: 首先引 ...

  3. 虚拟机安装的kali无法识别本机物联网卡

    http://blog.csdn.net/sb985/article/details/76427624

  4. 【全面解禁!真正的Expression Blend实战开发技巧】第十章 FluidMoveBehavior完全解析之三飞出ListBox吧

    原文:[全面解禁!真正的Expression Blend实战开发技巧]第十章 FluidMoveBehavior完全解析之三飞出ListBox吧 刚才有人说我的标题很给力,哈哈.那这个标题肯定更给力了 ...

  5. c#实现golang 的channel

    使用.NET的 BlockingCollection<T>来包装一个ConcurrentQueue<T>来实现golang的channel. 代码如下: public clas ...

  6. SQL SERVER中UPDLOCK ,READPAST使用

    原文:SQL SERVER中UPDLOCK ,READPAST使用 SQL SERVER中中获取不重复数据: select top 1 * from orders with(UPDLOCK ,READ ...

  7. Android零基础入门第41节:使用SimpleAdapter

    原文:Android零基础入门第41节:使用SimpleAdapter 通过ArrayAdapter实现Adapter虽然简单.易用,但ArrayAdapter的功能比较有限,它的每个列表项只能给一个 ...

  8. WebApi 中FromUri参数自动解析成实体的要求

    条件一:类属性名称必须和参数名称相同(不分大小写) 条件二:API参数必须以[FromUri]来修饰(数组也需要添加,否则参数传递不了) 条件三:属性类型为“类”的,如果使用类名(导航属性在本类的名称 ...

  9. Windows 10 版本信息

    原文 https://technet.microsoft.com/zh-cn/windows/release-info Windows 10 版本信息 Microsoft 已更新其服务模型. 半年频道 ...

  10. Windows 10 UWP开发:如何去掉ListView默认的选中效果

    原文:Windows 10 UWP开发:如何去掉ListView默认的选中效果 开发UWP的时候,很多人会碰到一个问题,就是ListView在被数据绑定之后经常有个默认选中的效果,就像这样: 而且它不 ...