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",
 .........完整代码请登录后点击上方下载按钮下载查看