抽象派流动动画效果-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.move.........完整代码请登录后点击上方下载按钮下载查看