原生js实现canvas彩色粒子波纹动画效果代码-html代码-BFW代码库

原生js实现canvas彩色粒子波纹动画效果代码

代码语言：html

所属分类：粒子

代码描述：原生js实现canvas彩色粒子波纹动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
  margin: 0;
  background: #000;
  color: #fff;
  height: 100vh;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
}
</style>


</head>

<body>
  <canvas></canvas>

  
      <script >
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const { floor, random, PI } = Math;

const pick = arr => arr[floor(random() * arr.length)];

const randomColor = () => pick(['white', 'cyan', 'orange', 'deepskyblue', 'deeppink', 'yellow']);

const bugs = Array.from({ length: 900 }, () => ({
  color: randomColor(),
  x: (random() < .5 ? 0 : 1) * (innerWidth - 1),
  y: (random() < .5 ? 0 : 1) * (innerHeight - 1),
  angle: random() * 2 * PI,
  phi: 1 + random() * 5 }));


function move(bug) {
  const.........完整代码请登录后点击上方下载按钮下载查看