js实现canvas零件人跳舞动画交互效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js实现canvas零件人跳舞动画交互效果代码，拖动一个往上抛试试

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

<html lang="en"><head>

  <meta charset="UTF-8">

  
  
  
<style>
body, html {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	background:#000;
	cursor: pointer;
}
</style>


</head>

<body>
  <canvas width="971" height="744"></canvas><!-- 
o
 \_/\o
( Oo)                    \|/
(_=-)  .===O-  ~~Z~A~P~~ -O-
/   \_/U'                /|\
||  |_/
\\  |
{K ||
 | PP
 | ||
 (__\\


-->

      <script >
"use strict";
///////////////// worker thread code ///////////////////
const theLastExperience = noWorkers => {
  "use strict";
  // ---- robot structure ----
  const struct = {
    points: [
    {
      x: 0,
      y: -4,
      f(s, d) {
        this.y -= 0.01 * s * ts;
      } },

    {
      x: 0,
      y: -16,
      f(s, d) {
        this.y -= 0.02 * s * d * ts;
      } },

    {
      x: 0,
      y: 12,
      f(s, d) {
        this.y += 0.02 * s * d * ts;
      } },

    { x: -12, y: 0 },
    { x: 12, y: 0 },
    {
      x: -3,
      y: 34,
      f(s, d) {
        if (d > 0) {
          this.x += 0.01 * s * ts;
          this.y -= 0.015 * s * ts;
        } else {
          this.y += 0.02 * s * ts;
        }
      } },

    {
      x: 3,
      y: 34,
      f(s, d) {
        if (d > 0) {
          this.y += 0.02 * s * ts;
        } else {
          this.x -= 0.01 * s * ts;
          this.y -= 0.015 * s * ts;
        }
      } },

    {
      x: -28,
      y: 0,
      f(s, d) {
        this.x += this.vx * 0.025 * ts;
        this.y -= 0.001 * s * ts;
      } },

    {
      x: 28,
      y: 0,
      f(s, d) {
        this.x += this.vx * 0.025 * ts;
        this.y -= 0.001 * s * ts;
      } },

    {
      x: -3,
      y: 64,
      f(s, d) {
        this.y += 0.015 * s * ts;
        if (d > 0) {
          this.y -= 0.01 * s * ts;
        } else {
          this.y += 0.05 * s * ts;
        }
      } },

    {
      x: 3,
      y: 64,
      f(s, d) {
        this.y += 0.015 * s * ts;
        if (d > 0) {
          this.y += 0.05 * s * ts;
        } else {
          this.y -= 0.01 * s * ts;
        }
      } }],


    links: [
    { p0: 3, p1: 7, size: 12, lum: 0.5 },
    { p0: 1, p1: 3, size: 24, lum: 0.5 },
    { p0: 1, p1: 0, size: 60, lum: 0.5, disk: 1 },
    { p0: 5, p1: 9, size: 16, lum: 0.5 },
    { p0: 2, p1: 5, size: 32, lum: 0.5 },
    { p0: 1, p1: 2, size: 50, lum: 1 },
    { p0: 6, p1: 10, size: 16, lum: 1.5 },
    { p0: 2, p1: 6, size: 32, lum: 1.5 },
    { p0: 4, p1: 8, size: 12, lum: 1.5 },
    { p0: 1, p1: 4, size: 24, lum: 1.5 }] };


  class Robot {
    constructor(color, light, size, x, y, struct) {
      this.x = x;
      this.points = [];
      this.links = [];
      this.frame = 0;
      this.dir = 1;
      this.size = size;
      this.color = Math.round(color);
      this.light = light;
      // ---- create points ----
      for (const p of struct.points) {
        this.points.push(new Robot.Point(size * p.x + x, size * p.y + y, p.f));
      }
      // ---- create links ----
      for (const link of struct.links) {
        const p0 = this.points[link.p0];
        const p1 = this.points[link.p1];
        const dx = p0.x - p1.x;
        const dy = p0.y - p1.y;
        this.links.push(
        new Robot.Link(
        this,
        p0,
        p1,
        Math.sqrt(dx * dx + dy * dy),
        link.size * size / 3,
        link.lum,
        link.force,
        link.disk));


      }
    }
    update() {
      if (++this.frame % Math.round(20 / ts) === 0) this.dir = -this.dir;
      if (this === pointer.dancerDrag && this.size < 16 && this.frame > 600) {
        pointer.dancerDrag = null;
        dancers.push(
        new Robot(
        this.color + 90,
        this.light * 1.25,
        this.size * 2,
        pointer.x,
        pointer.y - 100 * this.size * 2,
        struct));


        dancers.sort(function (d0, d1) {
          return d0.size - d1.size;
        });
      }
      // ---- update links ----
      for (const link of this.links) link.update();
      // ---- update points ----
      for (const point of this.points) point.update(this);
      // ---- ground ----
      for (const link of this.links) {
        const p1 = link.p1;
        if (p1.y > canvas.height * ground - link.size * 0.5) {
          p1.y = canvas.height * ground - link.size * 0.5;
          p1.x -= p1.vx;
          p1.vx = 0;
          p1.vy = 0;
        }
      }
      // ---- center position ----
      this.points[3].x += (this.x - this.points[3].x) * 0.001;
    }
    draw() {
      for (const link of this.links) {
        if (link.size) {
          const dx = link.p1.x - link.p0.x;
          const dy = link.p1.y - link.p0.y;
          const a = Math.atan2(dy, dx);
          // ---- shadow ----
          ctx.save();
          ctx.translate(link.p0.x + link.size * 0.25, link.p0.y + link.size * 0.25);
          ctx.rotate(a);
          ctx.drawImage(
          link.shadow,
          -link.size * 0.5,
          -link.size * 0.5);

          ctx.restore();
          // ---- stroke ----
          ctx.save();
          ctx.translate(link.p0.x, link.p0.y);
          ctx.rotate(a);
          ctx.drawImage(
          link.image,
          -link.size * 0.5,
          -link.size * 0.5);

          ctx.restore();
        }
      }
    }}

  Robot.Link = class Link {
    constructor(parent, p0, p1, dist, size, light, force, disk) {
      this.p0 = p0;
      this.p1 = p1;
      this.distance = dist;
      this.size = size;
      this.light = light || 1.0;
      this.force = force || 0.5;
      this.image = this.stroke(
      "hsl(" + parent.color + " ,30%, " + parent.light * this.light + "%)",
      true, disk, dist, size);

      this.shadow = this.stroke("rgba(0,0,0,0.5)", false, disk, dist, size);
    }
    update() {
      const p0 = this.p0;
      const p1 = this.p1;
      const dx = p1.x - p0.x;
      const dy = p1.y - p0.y;
      const dist = Math.sqrt(dx * dx + dy * dy);
      if (dist > 0.0) {
        const tw = p0.w + p1.w;
        const r1 = p1.w / tw;
        const r0 = p0.w / tw;
        const dz = (this.distance - dist) * this.force;
        const sx = dx / dist * dz;
        const sy = dy / dist * dz;
        p1.x += sx * r0;
        p1.y += sy * r0;
        p0.x -= sx * r1;
        p0.y -= sy * r1;
      }
    }
    stroke(color, axis, disk, dist, size) {
      let image;
      if (noWorkers) {
        image = document.createElement("canvas");
        image.width = dist + size;
        image.height = size;
      } else {
        image = new OffscreenCanvas(dist + size, size);
      }
      const ict = image.getContext("2d");
      ict.beginPath();
      ict..........完整代码请登录后点击上方下载按钮下载查看