蛇形动态背景特效-BFW代码库

蛇形动态背景特效

代码语言：html

所属分类：背景

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Growth II</title>
<style>
      html, body {
  overflow: hidden;
  background-color: black;
}

    </style>

</head>
<body>

<script>
      const { PI, cos, sin, abs, sqrt, pow, floor, round, random } = Math;
const HALF_PI = 0.5 * PI;
const TAU = 2 * PI;
const TO_RAD = PI / 180;
const rand = n => n * random();
const randRange = n => n - rand(2 * n);
const fadeIn = (t, m) => t / m;
const fadeOut = (t, m) => (m - t) / m;
const fadeInOut = (t, m) => {
  let hm = 0.5 * m;
  return abs((t + hm) % m - hm) / hm;
};

let canvas;
let ctx;
let particles;
let hover;
let mouse;
let tick;

function setup() {
  canvas = {
    a: document.createElement('canvas'),
    b: document.createElement('canvas') };

  ctx = {
    a: canvas.a.getContext('2d'),
    b: canvas.b.getContext('2d') };

  canvas.b.style = `
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	`;
  document.body.appendChild(canvas.b);
  particles = [];
  hover = false;
  mouse = { x: 0, y: 0 };
  tick = 0;
  resize();
  draw();
}

function resize() {
  canvas.a.width = canvas.b.width = window.innerWidth;
  canvas.a.height = canvas.b.height = window.innerHeight;
}

function mousehandler(e) {
  hover = e.type === 'mousemove';
  if (hover) {
    mouse.x = e.clientX;
    mouse.y = e.clientY;
  }
}

function getParticle(x, y) {
  return {
    position: { x, y },
    size: 2 + rand(20),
    speed: 2 + rand(5),
    direction: floor(rand(6)) * 60 * TO_RAD,
    turnDirection: randRange(1) * 0.1,
    directionChangeRate: 20 + round(rand(10)),
    hue: rand(90) + 180,
    ttl: 100 + rand(50),
    life: 0,
    destroy: false,
    update() {
      this.destroy =.........完整代码请登录后点击上方下载按钮下载查看

蛇形动态背景特效

网友评论0