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

代码语言:html

所属分类:动画

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

代码标签: 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 * Mat.........完整代码请登录后点击上方下载按钮下载查看

网友评论0