HTML5 canvas 实现多颜色粒子星空页面背景，喜欢的可以收藏。自己可以定义颜色，粒子透明度，粒子数量，粒子大小。

预览效果图如下：

1.获取canvas上下文，并且动态设置canvas尺寸和屏幕大小一样。

  1. var canvas = document.getElementById('canvas')
  2.     var viewW = window.innerWidth
  3.     var viewH = window.innerHeight
  4.  
  5.     canvas.width = viewW
  6.     canvas.height = viewH
  7.     var ctx = canvas.getContext('2d')
  8.     ctx.save()

2.定义粒子参数。
number: 粒子数量
maxDot: 粒子最大半径
array: 记录每个粒子的属性

  1. var dots = {
  2.    number: ,
  3.    maxDot: ,
  4.    array: []
  5. }

3.定义别的参数。
isOne: 是否是第一次画
step: 每次运行的距离

  1. var isOne = true
  2. var step = 0.3
  3. var x =
  4. var y =
  5. var x1 =
  6. var y1 =

4.生成随机颜色。

  1. function generateRandomColors() {
  2.         var color1 = Math.random() *  || ,
  3.             color2 = Math.random() *  || ,
  4.             color3 = Math.random() *  || ,
  5.             color4 = Math.random() *  || 0.1;
  6.         return `rgba(${color1},${color2},${color3},${color4})`
  7.     }

5.画粒子和线条。

  1. function drawDots() {
  2.         ctx.clearRect(, , viewW, viewH)
  3.         ctx.fillStyle = '#000'
  4.         ctx.fillRect(, , viewW, viewH)
  5.  
  6.         for (var i = ; i < dots.number; i++) {
  7.             var dotR,
  8.                 dotX,
  9.                 dotY,
  10.                 dotC,
  11.                 dot_X = 0.3,
  12.                 dot_Y = ;
  13.             if (isOne) {
  14.                 dotR = Math.round(Math.random() * dots.maxDot) || ;
  15.                 dotX = Math.round(Math.random() * viewW);
  16.                 dotY = Math.round(Math.random() * viewH);
  17.                 dotC = generateRandomColors();
  18.                 if (Math.round(Math.random()) == ) {
  19.                     dot_X = 0.3
  20.                 } else {
  21.                     dot_X = -0.3
  22.                 }
  23.                 if (Math.round(Math.random()) == ) {
  24.                     dot_Y = 0.3
  25.                 } else {
  26.                     dot_Y = -0.3
  27.                 }
  28.                 dots.array.push({
  29.                     dotR,
  30.                     dotX,
  31.                     dotY,
  32.                     dotC,
  33.                     dot_X,
  34.                     dot_Y
  35.                 })
  36.                 if (i == ) {
  37.                     x = dotX;
  38.                     y = dotY;
  39.                 }
  40.                 if (i == ) {
  41.                     x1 = dotX;
  42.                     y1 = dotY;
  43.                 }
  44.  
  45.             } else {
  46.  
  47.                 if (dots.array[i].dotX + dots.array[i].dot_X > viewW) {
  48.                     dots.array[i].dot_X = -0.3
  49.                 }
  50.                 if (dots.array[i].dotX + dots.array[i].dot_X < ) {
  51.                     dots.array[i].dot_X = 0.3
  52.                 }
  53.                 if (dots.array[i].dotY + dots.array[i].dot_Y > viewH) {
  54.                     dots.array[i].dot_Y = -0.3
  55.                 }
  56.                 if (dots.array[i].dotY + dots.array[i].dot_Y < ) {
  57.                     dots.array[i].dot_Y = 0.3
  58.                 }
  59.                 dots.array[i].dotX += dots.array[i].dot_X
  60.                 dots.array[i].dotY += dots.array[i].dot_Y
  61.                 dotX = dots.array[i].dotX;
  62.                 dotY = dots.array[i].dotY;
  63.                 dotR = dots.array[i].dotR;
  64.                 dotC = dots.array[i].dotC;
  65.                 ctx.beginPath();
  66.                 ctx.fillStyle = dotC;
  67.                 ctx.arc(dotX, dotY, dotR, , Math.PI * );
  68.                 ctx.fill()
  69.                 if (Math.abs(x - dots.array[i].dotX) <  && Math.abs(y - dots.array[i].dotY) < ) {
  70.                     ctx.strokeStyle = dotC
  71.                     ctx.moveTo(x, y)
  72.                     ctx.lineTo(dots.array[i].dotX, dots.array[i].dotY)
  73.                     ctx.stroke()
  74.                 }
  75.                 if (Math.abs(x1 - dots.array[i].dotX) <  && Math.abs(y1 - dots.array[i].dotY) < ) {
  76.                     ctx.strokeStyle = dotC
  77.                     ctx.moveTo(x1, y1)
  78.                     ctx.lineTo(dots.array[i].dotX, dots.array[i].dotY)
  79.                     ctx.stroke()
  80.                 }
  81.             }
  82.         }
  83.  
  84.         if (isOne) {
  85.             isOne = false
  86.         }
  87.         ctx.restore()
  88.         requestAnimationFrame(drawDots)
  89.     }

源码：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <title>粒子</title>
  7.      <style>
  8.      * {
  9.          padding: ;
  10.          margin: ;
  11.          overflow: hidden;
  12.      }
  13.      </style>
  14.  </head>
  15.  
  16.  <body>
  17.      <canvas id="canvas"></canvas>
  18.      <script>
  19.      var canvas = document.getElementById('canvas')
  20.      var viewW = window.innerWidth
  21.      var viewH = window.innerHeight
  22.  
  23.      canvas.width = viewW
  24.      canvas.height = viewH
  25.      var ctx = canvas.getContext('2d')
  26.      ctx.save()
  27.      // 原型粒子对象参数
  28.      var dots = {
  29.          number: ,
  30.          maxDot: ,
  31.          array: []
  32.      }
  33.      var isOne = true
  34.      var step = 0.3
  35.      var x =
  36.      var y =
  37.      var x1 =
  38.      var y1 =
  39.      drawDots()
  40.  
  41.      // 画粒子
  42.      function drawDots() {
  43.          ctx.clearRect(, , viewW, viewH)
  44.          ctx.fillStyle = '#000'
  45.          ctx.fillRect(, , viewW, viewH)
  46.  
  47.          for (var i = ; i < dots.number; i++) {
  48.              var dotR,
  49.                  dotX,
  50.                  dotY,
  51.                  dotC,
  52.                  dot_X = 0.3,
  53.                  dot_Y = ;
  54.              if (isOne) {
  55.                  dotR = Math.round(Math.random() * dots.maxDot) || ;
  56.                  dotX = Math.round(Math.random() * viewW);
  57.                  dotY = Math.round(Math.random() * viewH);
  58.                  dotC = generateRandomColors();
  59.                  if (Math.round(Math.random()) == ) {
  60.                      dot_X = 0.3
  61.                  } else {
  62.                      dot_X = -0.3
  63.                  }
  64.                  if (Math.round(Math.random()) == ) {
  65.                      dot_Y = 0.3
  66.                  } else {
  67.                      dot_Y = -0.3
  68.                  }
  69.                  dots.array.push({
  70.                      dotR,
  71.                      dotX,
  72.                      dotY,
  73.                      dotC,
  74.                      dot_X,
  75.                      dot_Y
  76.                  })
  77.                  if (i == ) {
  78.                      x = dotX;
  79.                      y = dotY;
  80.                  }
  81.                  if (i == ) {
  82.                      x1 = dotX;
  83.                      y1 = dotY;
  84.                  }
  85.  
  86.              } else {
  87.  
  88.                  if (dots.array[i].dotX + dots.array[i].dot_X > viewW) {
  89.                      dots.array[i].dot_X = -0.3
  90.                  }
  91.                  if (dots.array[i].dotX + dots.array[i].dot_X < ) {
  92.                      dots.array[i].dot_X = 0.3
  93.                  }
  94.                  if (dots.array[i].dotY + dots.array[i].dot_Y > viewH) {
  95.                      dots.array[i].dot_Y = -0.3
  96.                  }
  97.                  if (dots.array[i].dotY + dots.array[i].dot_Y < ) {
  98.                      dots.array[i].dot_Y = 0.3
  99.                  }
  100.                  dots.array[i].dotX += dots.array[i].dot_X
  101.                  dots.array[i].dotY += dots.array[i].dot_Y
  102.                  dotX = dots.array[i].dotX;
  103.                  dotY = dots.array[i].dotY;
  104.                  dotR = dots.array[i].dotR;
  105.                  dotC = dots.array[i].dotC;
  106.                  ctx.beginPath();
  107.                  ctx.fillStyle = dotC;
  108.                  ctx.arc(dotX, dotY, dotR, , Math.PI * );
  109.                  ctx.fill()
  110.                  if (Math.abs(x - dots.array[i].dotX) <  && Math.abs(y - dots.array[i].dotY) < ) {
  111.                      ctx.strokeStyle = dotC
  112.                      ctx.moveTo(x, y)
  113.                      ctx.lineTo(dots.array[i].dotX, dots.array[i].dotY)
  114.                      ctx.stroke()
  115.                  }
  116.                  if (Math.abs(x1 - dots.array[i].dotX) <  && Math.abs(y1 - dots.array[i].dotY) < ) {
  117.                      ctx.strokeStyle = dotC
  118.                      ctx.moveTo(x1, y1)
  119.                      ctx.lineTo(dots.array[i].dotX, dots.array[i].dotY)
  120.                      ctx.stroke()
  121.                  }
  122.              }
  123.          }
  124.  
  125.          if (isOne) {
  126.              isOne = false
  127.          }
  128.          ctx.restore()
  129.          requestAnimationFrame(drawDots)
  130.      }
  131.      // 生成随机颜色
  132.      function generateRandomColors() {
  133.          var color1 = Math.random() *  || ,
  134.              color2 = Math.random() *  || ,
  135.              color3 = Math.random() *  || ,
  136.              color4 = Math.random() *  || 0.1;
  137.          return `rgba(${color1},${color2},${color3},${color4})`
  138.      }
  139.      </script>
  140.  </body>
  141.  
  142.  </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. WinRAR 5.50 简体中文正式版发布（20多项改进）

    感谢ikimi的投递 流行好用的压缩工具,支持鼠标拖放及外壳扩展,完美支持 ZIP 档案,内置程序可以解开 CAB.ARJ.LZH.TAR.GZ.ACE.UUE.BZ2.JAR.ISO 等多种类型的压 ...

  2. 各种Message中文解释（一部分）

    函数功能:该函数将指定的消息发送到一个或多个窗口.此函数为指定的窗口调用窗口程序,直到窗口程序处理完消息再返回.该函数是应用程序和应用程序之间进行消息传递的主要手段之一.    函数原型:LRESUL ...

  3. WPF 悬浮键盘

    原文:WPF 悬浮键盘 public class TouchScreenKeyboard : Window { #region Property & Variable & Constr ...

  4. git/github初级运用自如 （good）

    三 . 设置用户信息 这一步不是很重要,貌似不设置也行,但github官方步骤中有,所以这里也提一下. 在git中设置用户名,邮箱 $ git config --global user.name &q ...

  5. Motion Paths in WPF 4 using Expression Blend 4

    原文 Motion Paths in WPF 4 using Expression Blend 4 Posted by: Pravinkumar Dabade , on 3/19/2011, in C ...

  6. Win8Metro(C#)数字图像处理--2.4图像颜色聚类

    原文:Win8Metro(C#)数字图像处理--2.4图像颜色聚类  [函数名称] 图像颜色聚类函数ClusterProcess(WriteableBitmap src,int value) [算 ...

  7. android 获取 cpu 频率信息

    cpu的频率信息可以在/sys/devices/system/cpu/cpu0/cpufreq/路径下读取 比如最高频率路径为:/sys/devices/system/cpu/cpu0/cpufreq ...

  8. Android零基础入门第13节：Android Studio配置优化，打造开发利器

    原文:Android零基础入门第13节:Android Studio配置优化,打造开发利器 是不是很多同学已经有烦恼出现了?电脑配置已经很高了,但是每次运行Android程序的时候就很卡,而且每次安装 ...

  9. 将QT开发的界面程序封装成DLL，在VC中成功调用（必须有消息循环，所以使用了QTWinmigrate，附CSDN可下载的Demo）

    最近手头的一个项目需要做一个QT界面,并且封装成DLL,然后再动态调用DLL给出的接口函数,使封装在DLL内部的QT界面跑起来,在网上查了很多资料,今天终于成功了,经验不敢独享,因为CSDN给了我很多 ...

  10. 使用SqlSugar封装的数据层基类

    首先简单封装了个DbContext public class DbContext { #region 属性字段 private static string _connectionString; /// ...