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