抽象派流动动画效果-html代码-BFW代码库

抽象派流动动画效果

代码语言：html

所属分类：动画

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

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

<title>Regular flow field</title>

<style>
      body{overflow:hidden;}
canvas{background:black}
    </style>

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

<script>
      let ctx = canvas.getContext("2d");
let cw = canvas.width = window.innerWidth;
let ch = canvas.height = window.innerHeight;
let rid = null; // request animation id
ctx.fillStyle = "hsla(0, 5%, 5%, .025)";

class Particle {
  constructor() {
    this.pos = { x: Math.random() * cw, y: Math.random() * ch };
    this.vel = { x: 0, y: 0 };
    this.base = (1 + Math.random()) * 3;
    this.life = randomIntFromInterval(5, 20);
    this.color = Math.random() < .1 ? "hsla(200,90%,50%,1)" : "hsla(0,0%,30%,.7)";
    this.history = [];
  }

  update() {
    this.history.push({ x: this.pos.x, y: this.pos.y });
    this.pos.x += this.vel.x;
    this.pos.y += this.vel.y;
  }

  show() {
    this.life--;
    ctx.beginPath();
    let last = this.history.length - 1;
    ctx.moveTo(this.history[last].x, this.history[last].y);
    for (let i = last; i > 0; i--) {
      ctx.lineTo(this.history[i].x, this.history[i].y);
    }
    ctx.strokeStyle = this.color;
    ctx.stroke();

    if (this.history.length > this.life) this.history.splice(0, 1);
  }

  edges() {
    if (
    this.pos.x > cw ||
    this.pos.x < 0 ||
    this.pos.y > ch ||
    this.pos.y < 0)
    {
      this.pos.y = Math.random() * ch;
      this.pos.x = Math.random() * cw;
      this.history.length = 0;
    }
    if (this.life <= 0) {
      this.pos.y = Math.random() * ch;
  .........完整代码请登录后点击上方下载按钮下载查看