canvas流场线条绘制动画效果代码-html代码-BFW代码库

canvas流场线条绘制动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas流场线条绘制动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
#canvas1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>



</head>

<body>
  <canvas id="canvas1"></canvas>

  
      <script>
// https://www.bit-101.com/blog/2017/10/23/flow-fields-part-i/
const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;;
canvas.height = window.innerHeight;

ctx.shadowColor = 'black';
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 20;
ctx.shadowBlur = 10;

class Particle {
  constructor(width, height, index) {
    this.width = width;
    this.height = height;
    this.index = index;
    this.x = 0;
    this.y = this.height * 0.5 + this.index;
    this.scale = 0.007;
    this.vx = 0;
    this.vy = 0;
    this.a = 0.5;
    this.b = 1;
    this.c = 1.34;
    this.d = -1.7;
    this.hue = 0;
  }
  getValue(x, y) {
    x = (x - this.width / 2) * this.scale;
    y = (y - this.height / 2) * this.scale;
    // clifford
    // http://paulbourke.net/fractals/clifford/
    // const x1 = Math.sin(a * y) + c * Math.cos(a * x);
    // const y1 = Math.sin(b * x) + d * Math.cos(a * y);

    // peter de jong
    // http://paulbourke.net/fractals/peterdejong/
    const x1 = Math.sin(this.a * y) - Math.cos(this.b * x);
    const y1 = Math.sin(this.c * x) - Math.cos(this.d * y);

    return Math.atan2(y1 - y, x1 - x);
  }
  update(noiseValue) {
    this.vx += Math.cos(noiseVa.........完整代码请登录后点击上方下载按钮下载查看