js实现canvas渐变线条动画效果代码-html代码-BFW代码库

js实现canvas渐变线条动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas渐变线条动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>

html, body {
  overflow: hidden;
  background: #000;
  padding: 0px;
  margin: 0px;
}
</style>


</head>

<body>
  <canvas id="canvas"></canvas>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
      <script  >
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

window.onresize = function () {
  w = ctx.canvas.width = window.innerWidth;
  h = ctx.canvas.height = window.innerHeight;
};window.onresize();

lines = [];

conf = {
  hue: 5,
  shadow: false,
  width: 1,
  length: 1,
  emitNum: 2,
  speed: 1,
  opacity: 0.6,
  maxLines: 300 };


bgDots = [
{
  rad: (w + h) / 2,
  x: w / 2,
  y: 0,
  hue: 0 },

{
  rad: (w + h) / 2,
  x: 0,
  y: h,
  hue: -45 },

{
  rad: (w + h) / 2,
  x: w,
  y: h,
  hue: -90 }];



var gui = new dat.GUI();
var f1 = gui.addFolder("Design");
var f2 = gui.addFolder("Behaviour");
f1.add(conf, "hue", 0, 360).step(1).name("Color");
f1.add(conf, "opacity", 0.1, 1).step(0.1).name("Opacity");
f1.add(conf, "width", 0.3, 3).step(0.1).name("Width");
f1.add(conf, "length", 0.2, 2).step(0.1).name("Length");
f2.add(conf, "emitNum", 1, 5).step(1).name("Amount");
f2.add(conf, "speed", 0.5, 1.5).step(0.1).name("Speed");
f2.add(conf, "maxLines", 100, 1000).step(1).name("Max Lines");
//gui.add(conf, "shadow");

function emitLine() {
  if (conf.maxLines < lines.length)
  return;
  for (var i = 0; i < conf.emitNum; i++) {
    var rx = Math.random() * w + 100;
    var ry = Math.random() * h - 100;
    lines.push({
      x1: rx,
      y1: ry,
      x2: rx,
      y2: ry,
      length: (Math.random() * (260 - 80) + 80) * conf.length,
      width: (Math.random() * (15 - 5) + 5) * conf.width,
      v1: (Math.random() * (4 - 2) + 2) * conf.speed,
      v2: (Math.random() * (1 - 0.5) + 0.5) * conf.speed,
      half: false,
      hue: Math.random() * 50 });

  }
}

function drawBackground() {
  ctx.globalCompositeOperation = "lighter";
  for (v.........完整代码请登录后点击上方下载按钮下载查看