canvas闪烁的圆点灯光特效

基于canvas 2D画布绘制彩色的圆点一个个随机闪烁发光背景动画特效。

[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程

使用方法：

1、head引入css文件

<style>
body {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: hsla(0, 5%, 5%, 1);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: linear-gradient(to right top, hsla(0, 5%, 15%, 0.5), hsla(0, 5%, 5%, 1));
  
  background-image: -moz-linear-gradient(to right top, hsla(0, 5%, 15%, 0.5), hsla(0, 5%, 5%, 1));
}
p{
  text-align:center;
  width:100%;
  color:hsla(0,50%,50%,1);
  font-size:6em;
  text-shadow:1px 1px hsla(0,0%,5%,1),
          -1px -1px hsla(0,0%,5%,1);
  font-family: 'Poiret One', cursive;
  letter-spacing: 6px;
  text-align: center;
  position: relative;
  margin-top: 40vh;
}
</style>

2、body引入HTML代码

<canvas id="canv"></canvas>

<script type="text/javascript">
window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();
var c = document.getElementById('canv');
var $ = c.getContext('2d');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var _w = w * 0.5;
var _h = h * 0.5;
var arr = [];
var cnt = 0;

window.addEventListener('load', resize);
window.addEventListener('resize', resize, false);

function resize() {
  c.width = w = window.innerWidth;
  c.height = h = window.innerHeight;
  c.style.position = 'absolute';
  c.style.left = (window.innerWidth - w) *
    .01 + 'px';
  c.style.top = (window.innerHeight - h) *
    .01 + 'px';
}

function anim() {
  cnt++;
  if (cnt % 6) draw();
  window.requestAnimFrame(anim);
}
anim();

function draw() {

  var splot = {
    x: rng(_w - 900, _w + 900),
    y: rng(_h - 900, _h + 900),
    r: rng(20, 80),
    spX: rng(-1, 1),
    spY: rng(-1, 1)
  };

  arr.push(splot);
  while (arr.length > 100) {
    arr.shift();
  }
  $.clearRect(0, 0, w, h);

  for (var i = 0; i < arr.length; i++) {

    splot = arr[i];;
    $.fillStyle = rndCol();
    $.beginPath();
    $.arc(splot.x, splot.y, splot.r, 0, Math.PI * 2, true);
    $.shadowBlur = 80;
    $.shadowOffsetX = 2;
    $.shadowOffsetY = 2;
    $.shadowColor = rndCol();
    $.globalCompositeOperation = 'lighter';
    $.fill();

    splot.x = splot.x + splot.spX;
    splot.y = splot.y + splot.spY;
    splot.r = splot.r * 0.96;
  }
}

function rndCol() {
  var r = Math.floor(Math.random() * 180);
  var g = Math.floor(Math.random() * 60);
  var b = Math.floor(Math.random() * 100);
  return "rgb(" + r + "," + g + "," + b + ")";
}

function rng(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>

文件目录

本资源来自：代码 » HTML5实例 » canvas闪烁的圆点灯光特效

注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！