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做点不一样的动画. 首先来看下效果 ...
随机推荐
- memmove、memccpy和memcpy
这三个函数都是内存拷贝,目的都是将N个字节的源内存地址的内容拷贝到目标内存地址中. void *memmove(void *dest,void*src,int count) v ...
- matlab 正态分布相关 API
randn:标准正太分布(μ=0,σ=1) normrnd:正态分布随机数,(需要手动指定 μ,σ,二者均是标量) mvnrnd:多变量正态分布随机数,(需要手动指定 μ,σ(二者为向量))
- VUE线上通过nginx反向代理实现跨域
1.NGINX反向代理实现跨域 VUE代码中配置参考上一篇文章 nginx配置,红色框线内: 代码: location /list { proxy_set_header X-Real-IP $remo ...
- 用C语言编写Windows服务程序的五个步骤
Windows 服务被设计用于需要在后台运行的应用程序以及实现没有用户交互的任务.为了学习这种控制台应用程序的基础知识,C(不是C++)是最佳选择.本文将建立并实现一个简单的服务程序,其功能是查询系统 ...
- win10限制访问解决
你的IT管理员已经限制对此应用一些区域的访问,你尝试访问的项目不可用.有关详细,请与你的IT支持人员联系. 按下win+s打开Cortana,在框中输入命令提示符,右键管理员身份运行在命令提示符中输入 ...
- ASP .NET Model
Model是全局变量,一个页面一个 前台 @ModelWebApplication1.Models.Movie; @{ ViewBag.Title = "ModelTest"; } ...
- 关于WPF后台触发键盘按键
1.变向响应Tab按键 private void Grid_KeyUp(object sender, KeyEventArgs e) { UIElement e ...
- 在2005年，Unicode 的第十万个字符被采纳且认可成为标准之一（超过这65535范围的Unicode字符，则需要使用一些诡异的技巧来实现）
在计算机科学领域中,Unicode(统一码.万国码.单一码.标准万国码)是业界的一种标准,它可以使电脑得以体现世界上数十种文字的系统.Unicode 是基于通用字符集(Universal Charac ...
- .net core api 跨域
什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制. 所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子: h ...
- 给 Web 开发人员推荐的通用独立 UI 组件（二）
现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高.在推荐完图形库之后,再来推荐一些精品的独立 UI 组件.这些组件可组合在一起,形成美观而交互强大的 Web UI . 给 We ...