原生js实现canvas霓虹灯烟雾背景动画效果代码-html代码-BFW代码库

原生js实现canvas霓虹灯烟雾背景动画效果代码

代码语言：html

所属分类：背景

代码描述：原生js实现canvas霓虹灯烟雾背景动画效果代码

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

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

     <style>
     * {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: hsla(220deg, 35%, 10%, 1);
  width: 100%;
  height: 100%;

}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(12px, 2vw, 26px);
}

h1 {
  position: absolute;
  font-family: 'Roboto';
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 1em;
  color: hsla(320deg, 100%, 95%, 0.3);
  font-size: 2em;
  animation: breathe 20000ms alternate infinite ease-in-out;
}
h1 > .last {
  letter-spacing: 0em;
}

@keyframes breathe {
  0% {
    transform: scale(1);
    color: hsla(320deg, 100%, 95%, 0.3);
  }
  100% {
    transform: scale(0.9);
    color: hsla(320deg, 100%, 95%, 0.8);
  }
}

canvas {
  width: 100%;
  height: 30em;
  box-shadow: 0 1em 2em 0.5em hsla(210deg, 35%, 0%, 0.1)
}
      </style>
</head>
<body>
  <canvas></canvas>
<h1>neon smok<span class="last">e</span></h1>
<script>
    (function global() {
  const canvas = document.querySelector('canvas');
  const ctx = canvas.getContext('2d');
  let width;
  let height;
  function resize() {
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;
  }
  resize();
  function animation() {
    let id;
    return function updater(fn) {
      if (id) {
        cancelAnimationFrame(id);
        id = null;
      }
      id = requestAnimationFrame(function() {
        fn().update(id);
        updater(fn);
      });
    }
  }
  function randomRange(min, max) {
    return min + Math.random() * (max - min);
  }
  function randomControlPoint(partSize, index) {
    const controlPoint = {
      x: randomRange(-partSize * index, partSize * index),
      y: randomRange(-partSize, partSize)
    }
    const magnitude = Math.hypot(controlPoint.x, controlPoint.y);
    return {
      x: ((controlPoint.x)).toFixed(0),
      y: ((controlPoint.y)).toFixed(0)
    }
  }
  function xCoord(index, partSize) {
    return (index * partSize + randomRange(-partSize / 8, partSize / 8)).toFixed(0);
  }
  function yCoord(index, partSize) {
    return (height / 2 + randomRange(-1, 1)).toFixed(0);
  }
  function reducePathVectors() {
    return function (p, v, idx) {
      if (idx === 0) {
        p = `M${v.x},${v.y}`;
        return p;
      }
      if (idx === 1) {
        p += `Q${v.dx},${v.dy},${v.x},${v.y}`
        return p;
      }
        p += `T${v.x},${v.y}`;
        return p;
    }
  }
  function generatePath() {
    const partitions = Math.floor(randomRange(3, 5));
    const partSize = width / partitions;
    const positionVectors = [];
    for(let index = 0; index <= partitions; index += 1) {
      let controlPoint = randomControlPoint(partSize, index);
      positionVectors.push({
        dx: controlPoint.x,
        dy: controlPoint.y,
        x: xCoord(index, partSize),
        y: yCoord(index, partSize),
      });
    }
    const path = positionVectors.reduce(reducePathVectors(), '');
    return path;
  }
  class Curve {
    constructor(color) {   
      this.color = color
      this.path = generatePath();
      this.........完整代码请登录后点击上方下载按钮下载查看