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%;
  overflow: hidden;
  touch-action: none;
  cursor: none;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<canvas id="canvas"></canvas>
<!-- partial -->
  <script >
      
      
      function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}
function lerp(a, b, n) {
  return (1 - n) * a + n * b;
}


//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
// Canvas
//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡*/

class Canvas {
  constructor({ canvas, entities = [], pointer }) {_defineProperty(this, "setCanvasSize",

    () => {
      const { innerWidth: w, innerHeight: h } = window;
      const w2 = w * this.dpr;
      const h2 = h * this.dpr;
      this.canvas.width = w2;
      this.canvas.height = h2;
      this.canvas.style.width = w + 'px';
      this.canvas.style.height = h + 'px';
      this.bounds = new Bounds(0, 0, w2, h2);
    });_defineProperty(this, "addEntity",

    newEntity => {
      this.entities = [...this.entities, newEntity];
      return this.entities.length - 1;
    });_defineProperty(this, "render",






    () => {
      // Main loop

      // Draw and Update items here.
      this.entities.forEach(({ draw, update }) => {
        draw(this);
        update(this);
      });

      ++this.tick;
      window.requestAnimationFrame(this.render);
    }); // setup a canvas
    this.canvas = canvas;this.dpr = window.devicePixelRatio || 1;this.ctx = canvas.getContext('2d');this.ctx.scale(this.dpr, this.dpr); // tick counter
    this.tick = 0; // entities to be drawn on the canvas
    this.entities = entities; // track mouse/touch movement
    this.pointer = pointer || null; // setup and run
    this.setCanvasSize();this.setupListeners();this.render();}setupListeners() {window.addEventListener('resize', this.setCanvasSize);}removeEntity(deleteIndex) {this.entities = this.entities.filter((el, i) => i !== deleteIndex);return this.entities;}} //*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
// Entity
//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡*/
class Entity {constructor() {_defineProperty(this, "dpr", window.devicePixelRatio || 1);_defineProperty(this, "toValue",
    value => value * this.dpr);_defineProperty(this, "draw",
    () => {});_defineProperty(this, "update",
    () => {});}}



//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
// Background
//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡*/

class Background extends Entity {
  constructor({ color }) {
    super();_defineProperty(this, "draw",








    context => {
      this.drawBg(context);
    });this.color = color;}drawBg({ ctx, canvas, bounds }) {ctx.fillStyle = this.color;ctx.fillRect(...bounds.params);}}


//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
// Cursor
//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡.........完整代码请登录后点击上方下载按钮下载查看