canvas实现绘制弧线噪点动画效果代码-html代码-BFW代码库

canvas实现绘制弧线噪点动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现绘制弧线噪点动画效果代码

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

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

<head>

  <meta charset="UTF-8">

  
<style>
body, html {
  margin: 0;
  overflow: hidden;
}

canvas {
  display: block;
  cursor: pointer;
}
</style>



</head>

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


class Mover {
  constructor() {
    this.x = Math.random() * w;
    this.y = Math.random() * h;
    const m = Math.min(w, h);
    this.size = (Math.random() + 0.08) * m * 0.1;
    this.r = (Math.random() + 0.1) * m * 0.4;
    const dir1 = Math.random() > 0.5 ? -1 : 1;
    this.ownAxisRotSpeed = dir1 * Math.random() * 0.03 + 0.007;
    const dir2 = Math.random() > 0.5 ? -1 : 1;
    this.rotSpeed = dir2 * Math.random() * 0.008 + 0.0005;
    this.ownAxisAngle = 0;
    this.angle = Math.random() * Math.PI * 2;
    const s = Math.floor(Math.random() * 40 + 20);
    const l = Math.floor(Math.random() * 80 + 10);
    const comp = Math.random() > 0.9 ? 0 : 180;
    const extra = Math.floor(Math.random() * 5);
    this.color = `hsla(${baseHue + comp + extra}, ${s}%, ${l}%, 0.03)`;
  }

  move() {
    this.ownAxisAngle += this.ownAxisRotSpeed;
    this.angle += this.rotSpe.........完整代码请登录后点击上方下载按钮下载查看