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;

    th.........完整代码请登录后点击上方下载按钮下载查看