lodash实现canvas偶极流星动画效果代码-html代码-BFW代码库

lodash实现canvas偶极流星动画效果代码

代码语言：html

所属分类：动画

代码描述：lodash实现canvas偶极流星动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    * {
  border: none;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
body {
  background: radial-gradient(#555, #111);
  overflow: hidden;
}
canvas {
  background: black;
  filter: blur(4px) contrast(8);
}
</style>

</head>
<body>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash.4.17.21.js"></script>
  <script  >

var App = {};
App.setup = function() {
  var canvas = document.createElement('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  this.ctx = canvas.getContext('2d');
  this.width = canvas.width;
  this.height = canvas.height;
  this.xC = canvas.width / 2;
  this.yC = canvas.height / 2;
  
  document.getElementsByTagName('body')[0].appendChild(canvas);
  
  this.stepCount = 0;
  this.particles = [];
  this.popPerBirth = 20;
  this.maxPop = 1000;
  this.lifespan = 1200;
  
  this.birth();
};
App.birth = function() {
  for (var i = 0; i < this.popPerBirth; i++) {
    // Add new particle to main this.particles array
    var r = 100, angle = 0.05 * (-0.5 + Math.random()) + 6.28 * i / this.popPerBirth;
    var particle = {
      x: this.xC + r * Math.cos(angle),
      y: this.yC + r * Math.sin(angle),
      xSpeed: 0,
      ySpeed: 0,
      size: 5 + 15 * Math.random(),
      name: 'seed-' + this.stepCount + '-' + Math.floor(1000000 * Math.random()),
      age: 0
    };
    
    this.particles.push(particle);
  }
};
App.evolve = function() {
  this.stepCount++;
  // Sometimes launch new line
  if (this.stepCount % 50 == 0 && this.particles.length < this.maxPop) {
    this.birth();
  }
  App.move();
  App.draw();
};
App.kill = function(particleName) {
 var newArray = _.reject(this.particles, funct.........完整代码请登录后点击上方下载按钮下载查看