canvas可触摸交互式水面波纹动画效果代码-html代码-BFW代码库

代码语言：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>
    <canvas id="canvas"></canvas>

    <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 getRandomFloat(min, max) {
          return Math.random() * (max - min) + min;
        }
        
        function getRandomInt(min, max) {
          return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        
        function cycle(value, total) {
          return (value % total + total) % total;
        }
        
        //*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
        // Entity
        //*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡*/
        
        class Entity {constructor() {_defineProperty(this, "dpr",
            window.devicePixelRatio || 1);_defineProperty(this, "toValue",
            value => value * this.dpr);_defineProperty(this, "draw",
            () => {});_defineProperty(this, "update",
            () => {});}}
        
        
        //*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
        // Point
        //*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡*/
        
        class Point {
          constructor(x, y) {
            this.x = x;
            this.y = y;
          }
        
          get position() {
            return [this.x, this.y];
          }
        
          clone() {
            return new Point(this.x, this.y);
          }
        
          delta(point) {
            return [this.x - point.x, this.y - point.y];
          }
        
          distance(point) {
            const dx = point.x - this.x;
            const dy = point.y - this.y;
            return Math.sqrt(dx * dx + dy * dy);
          }
        
          moveTo(x, y) {
            this.x = x;
            this.y = y;
            return this;
          }
        
          moveAtAngle(angle, distance) {
            this.x += Math.cos(angle) * distance;
            this.y += Math.sin(angle) * distance;
            return this;
          }
        
          applyVelocity(velocity) {
            this.x += velocity.vx;
            this.y += velocity.vy;
            return this;
          }
        
          angleRadians(point) {
            // radians = atan2(deltaY, deltaX)
            const y = point.y - this.y;
            const x = point.x - this.x;
            return Math.atan2(y, x);
          }
        
          angleDeg(point) {
            // degrees = atan2(deltaY, deltaX) * (180 / PI)
            const y = point.y - this.y;
            const x = point.x - this.x;
            return Math.atan2(y, x) * (180 / Math.PI);
          }
        
          rotate(origin, radians) {
            // rotate the point around a given origin point
            const cos = Math.cos(radians);
            const sin = Math.sin(radians);
            this.x =
            cos * (this.x - origin.x) + sin * (this.y - origin.y) + origin.x;
            this.y =
            cos * (this.y - origin.y) - sin * (this.x - origin.x) + origin.y;
            return this;
          }}
        
        
        
        //*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
        // Bounds
        //*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡*/
        
        class Bounds {
          constructor(x, y, w, h) {
            this.x = x;
            this.y = y;
            this.w = w;
            this.h = h;
            const hw = w / 2;
            const hh = h / 2;
            this.center = new Point(hw, hh);
            this.position = new Point(x, y);
          }
        
          get params() {
            return [this.x, this.y, this.w, this.h];
          }
        
          offsetOuter(offset) {
            const [x, y, w, h] = this.params;
            return new Bounds(
            x - offset,
            y - offset,
            w + offset * 2,
            h + offset * 2);
        
          }
        
          offsetInner(offset) {
            const [x, y, w, h] = this.params;
            return new Bounds(
            x + offset,
            y + offset,
            w - offset * 2,
            h - offset * 2);
        
          }}
        
        
        //*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
        // Background
        //*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡*/
        
        class Background extends Entity {constructor(...args) {super(...args);_defineProperty(this, "draw",
        
        
        
        
        
            context => {
              this.drawGradient(context);
              // this.drawText(context);
            });}drawText({ ctx, canvas }) {const ms = Math.min(canvas.width, canvas.height);const size = ms / 15;const copy = 'Waves';const x = canvas.width / 2;const y = canvas.height / 3 + size / 3;ctx.font = `700 italic ${size}px futura, sans-serif`;ctx.textAlign = 'center';ctx.fillStyle = '#edb07b';ctx.fillText(copy, x, y);}drawGradient({ ctx, canvas, bounds }) {// const gradient = ctx.createLinearGradient(...bounds.params);
            // gradient.addColorStop(0, '#333');
            // gradient.addColorStop(1, '#222');
            // ctx.fillStyle = gradient;
            ctx.fillStyle = '#252f3d'; // ctx.globalAlpha = 0.9;
            ctx.fillRect(...bounds.params); // ctx.globalAlpha = 1;
          }} //*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
        // 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);
              });
        
              // update pointer for demos
              this.pointer.update(this);
        
              // Cleanup "dead" entities
              this.removeDead();
        
              ++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(); // demo pointer
            this.pointer.addPointerModifier((pointer, tick) => {const cx = window.innerWidth / 2 * this.dpr;const cy = window.innerHeight / 2 * this.dpr; // const dx = window.innerWidth / 3 * this.dpr;
              const dy = window.innerHeight / 4 * this.dpr;const offX = cx;const offY = cy + Math.cos(-tick / 20) * dy;pointer.lastPosition.moveTo(pointer.position.x, pointer.position.y);pointer.position.moveTo(offX, offY);});}setupListeners() {window.addEventListener('resize', this.setCanvasSize);}removeEntity(deleteIndex) {this.entities = this.entities.filter((el, i) => i !== deleteIndex);return this.entities;}removeDead() {this.entities = this.entities.filter(({ dead = false }) => !dead);}} //*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
        // Cursor
        //*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡*/
        class Cursor extends Entity {constructor(radius) {super();_defineProperty(this, "draw",
        
        
        
        
        
        
            ({ ctx, pointer }) => {
              ctx.strokeStyle = this.strokeStyle;
              ctx.lineWidth = this.lineWidth;
              ctx.beginPath();
              ctx.arc(
              pointer.position.x,
              pointer.position.y,
              this.radius,
              0,
              this.pi2,
              true);
        
              ctx.closePath();
              ctx.stroke();
            });this.radius = this.toValue(radius);this.pi2 = Math.PI * 2;this.lineWidth = this.toValue(2);this.strokeStyle = '#7bc4a2';}}
        
        
        //*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
        // Pointer
        //*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡*/
        
        class Pointer {
          constructor() {_defineProperty(this, "update",
        
        
            ({ tick }) => {
              this.modifier && this.modifier(this, tick);
            });this.dpr = window.devicePixelRatio || 1;this.delta;this.la.........完整代码请登录后点击上方下载按钮下载查看