canvas实现水母游动可交互跟随鼠标动画效果代码-html代码-BFW代码库

canvas实现水母游动可交互跟随鼠标动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现水母游动可交互跟随鼠标动画效果代码

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

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

<head>
    <meta charset="UTF-8">

<style>
    html, body {
  width:  100%;
  height: 100%;
  margin: 0;
  background: rgb(0,30,60);
  overflow: hidden;
}

#C{
}
</style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <canvas id="C"></canvas>
    <!-- partial -->
    <script >
        
        window.onload = function () {
  let ctx = document.getElementById("C"),
    c = ctx.getContext("2d"),
    w,
    h;
  fitCanvas();

  function limit(vec, b) {
    this.d = Math.sqrt(Math.pow(vec.x, 2) + Math.pow(vec.y, 2));
    this.ang = Math.atan2(vec.y, vec.x);
    if (this.d > b) {
      return {
        x: b * Math.cos(this.ang),
        y: b * Math.sin(this.ang)
      };
    } else {
      return {
        x: this.d * Math.cos(this.ang),
        y: this.d * Math.sin(this.ang)
      };
    }
  }
  function setmag(a, m) {
    this.ang = Math.atan2(a.y, a.x);
    return {
      x: m * Math.cos(this.ang),
      y: m * Math.sin(this.ang)
    };
  }

  let mouse = { x: false, y: false },
    last_mouse = {},
    pi = Math.PI,
    seaMargin = 1000,
    boids = new Array(100);

  class boid {
    constructor() {
      this.opacity = Math.random() * 0.5 + 0.05;
      this.ang = Math.random() * 2 * Math.PI;
      this.mf = 0.1;
      this.ms = Math.random() * 0.1 + 0.9;
      this.vm = Math.random() * 1 + 0.5;
      this.pos = {
        x: Math.random() * w,
        y: Math.random() * h
      };
      this.vel = {
        x: this.vm * Math.cos(this.ang),
        y: this.vm * Math.sin(this.ang)
      };
      this.acc = {
        x: 0,
        y: 0
      };
    }
    flock(other) {
      this.aa = {
        x: 0,
        y: 0
      };
      this.ap = .........完整代码请登录后点击上方下载按钮下载查看