canvas实现漩涡动画效果代码-html代码-BFW代码库

canvas实现漩涡动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现漩涡动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
* {
  background: black;
  margin: 0;
}
</style>

  
  
</head>

<body translate="no">
  
  
      <script >
const canvas = document.createElement("canvas");
const c = canvas.getContext("2d");

canvas.width = innerWidth;
canvas.height = innerHeight;
document.body.append(canvas);

const TWO_PI = 2 * Math.PI;

class Dot {
  constructor(id, x, y, theta, parent) {
    this.x = x;
    this.y = y;
    this.t = theta;
    this.vx = Math.cos(this.t) * Math.random() * 2;
    this.vy = Math.sin(this.t) * Math.random() * 2;
    this.life = 30;
    this.col = parent.col;

    if (Math.random() < 0.005) this.other = true;
    if (this.other) {
      this.life = 1000;
      this.t = Math.random() * 7;
      this.vx = Math.cos(this.t) * Math.random() * 2;
      this.vy = Math.sin(this.t) * Math.random() * 2;
      this.col = "black";
    }
    this.iter = 0;
    this.parent = parent;
    this.id = id;
    this.alpha = 0.25;

    if (Math.random() < 0.3) this.alpha = 0.25;
  }

  draw() {
    this.x += this.vx;
    this.y += this.vy;
    this.iter++;
    if (this.iter > this.life) {
      delete this.parent.dots[this.id];
    }
    c.fillStyle = this.col;
    c.globalAlpha = this.alpha;
    if (!this.no) this.alpha -= 0.00125;
    c.fillRect(this.x, this.y, this.parent.size, this.parent.size);
  }}


class Stain {
  constructor(x = innerWidth, y = innerHeight) {
    this.x = x / 2;
    this.y = y / 2;
    this.num = 1;
    this.step = TWO_PI /.........完整代码请登录后点击上方下载按钮下载查看