蜂窝流彩动画效果-html代码-BFW代码库

蜂窝流彩动画效果

代码语言：html

所属分类：动画

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

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

<style>
canvas {
  
  position: absolute;
  top: 0;
  left: 0;
}
</style>

</head>
<body translate="no">
<canvas id=c></canvas>

<script>
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext('2d'),

opts = {

  len: 20,
  count: 50,
  baseTime: 10,
  addedTime: 10,
  dieChance: .05,
  spawnChance: 1,
  sparkChance: .1,
  sparkDist: 10,
  sparkSize: 2,

  color: 'hsl(hue,100%,light%)',
  baseLight: 50,
  addedLight: 10, // [50-10,50+10]
  shadowToTimePropMult: 6,
  baseLightInputMultiplier: .01,
  addedLightInputMultiplier: .02,

  cx: w / 2,
  cy: h / 2,
  repaintAlpha: .04,
  hueChange: .1 },


tick = 0,
lines = [],
dieX = w / 2 / opts.len,
dieY = h / 2 / opts.len,

baseRad = Math.PI * 2 / 6;

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, w, h);

function loop() {

  window.requestAnimationFrame(loop);

  ++tick;

  ctx.globalCompositeOperation = 'source-over';
  ctx.shadowBlur = 0;
  ctx.fillStyle = 'rgba(0,0,0,alp)'.replace('alp', opts.repaintAlpha);
  ctx.fillRect(0, 0, w, h);
  ctx.globalCompositeOperation = 'lighter';

  if (lines.length < opts.count && Math.random() < opts.spawnChance)
  lines.push(new Line());

  lines.map(function (line) {line.step();});
}
function Line() {

  this.reset();
}
Line.prototype.reset = function () {

  this.x = 0;
  this.y = 0;
  this.addedX = 0;
  this.addedY = 0;

  this.rad = 0;

  this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();

  this.color = opts.color.replace('hue',.........完整代码请登录后点击上方下载按钮下载查看