canvas龙卷风漩涡动画效果代码-html代码-BFW代码库

canvas龙卷风漩涡动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas龙卷风漩涡动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
<style>
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

  
  
</head>

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

const dpr = Math.min(2, window.devicePixelRatio);

const makeCtx = (w, h) => {
  const c = document.createElement("canvas");
  const ctx = c.getContext("2d");
  c.width = w;
  c.height = h;

  return ctx;
};

function pseudoRandom(seed) {
  return Math.sin(seed) * 10000 - Math.floor(Math.sin(seed) * 10000);
}

function noise(x, y) {
  const seed = x * 137 + y * 149; // Генерация уникального числа
  return pseudoRandom(seed) % 1; // Возвращаем значение от 0 до 1
}

function angle(cx, cy, ex, ey) {
  var dy = ey - cy;
  var dx = ex - cx;
  var theta = Math.atan2(dy, dx); // range (-PI, PI]
  theta *= 180 / Math.PI; // rads to degs, range (-180, 180]
  //if (theta < 0) theta = 360 + theta; // range [0, 360)
  return theta;
}

const distance = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1);

const grid = (v, a) => {
  return Math.floor(v / a) * a;
};

const padding = (v, p) => {
  return p + v - p * 2;
};

c.width = window.innerWidth * dpr;
c.height = window.innerHeight * dpr;

c.style.imageRendering = 'pixelated';
c.style.width = '100vw';
c.style.height = '100vh';

const points = [];
const createPoint = i => {
  const c.........完整代码请登录后点击上方下载按钮下载查看