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