canvas水墨风格动画效果代码-html代码-BFW代码库

canvas水墨风格动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas水墨风格动画效果代码

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

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

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

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


  
</head>

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

canvas.width = innerWidth * 2;
canvas.height = innerHeight * 2;
canvas.style.width = innerWidth + 'px';
canvas.style.height = innerHeight + 'px';
document.body.append(canvas);
canvas.style.filter = `contrast(1.3) sharpen(2)`;

class Quad {
  constructor() {
    this.xs = [];
    this.ys = [];

    this.dxs = [];
    this.dys = [];
    this.rad = 50 + Math.random() * 100;
    this.a = 0;
    this.da = 1;
    this.x = Math.random() * (canvas.width + 100);
    this.dx = Math.random() * (canvas.width + 100);

    this.y = Math.random() * (canvas.height + 100);
    this.dy = Math.random() * (canvas.height + 100);
    this.calc(this.xs, this.ys);
    this.calc(this.dxs, this.dys);
    this.c = Math.random() * 255;
    if (Math.random() < .3) this.c = 255;

    this.state = 'start';
    this.timeO = Math.random();
    if (Math.random() < .2) this.timeO *= -1;

    this.ddamp = 40 + Math.random() * Math.random() * 40;
  }
  calc(xs, ys) {
    let t = Math.random() * 7;
    for (let i = 0; i < 4; i++) {
      t += Math.random() * 2;
      let x = Math.cos(t) * this.rad;
      let y = Math.sin(t) * this.rad;
      xs[i] = x;
      ys[i] = y;
    }
  }

  draw() {
    this.a += (this.da - this.a) / 100;
    if (this.a > .9 && !this.rebuilding) {
      this.rebuilding = true;
      setTimeout(() => {
        this.a = 0;
        this.x = Math.random() * (canvas.width + 100);
        this.y = Math.random() * (canvas.height + 100);

        this.rebuilding = false;
      }, Math.........完整代码请登录后点击上方下载按钮下载查看