前端-原生-Canvas-水波纹

古猜..

已于 2023-11-08 11:28:02 修改

阅读量391

点赞数 1

分类专栏：前端文章标签： javascript css3 前端

于 2022-05-25 12:04:01 首次发布

本文链接：https://blog.csdn.net/qq_35099224/article/details/124963591

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas创意</title>
    <script src="../libs/WaverDrop.js"></script>

    <style>
      body{
        margin: 0px;
      }
    </style>
  </head>
  <body>
    <!-- 水波纹 -->
    <div>
      <canvas id="canvas-water"></canvas>
    </div>

    <script type="text/javascript">
      (function () {
        //水波纹
        let canvasWater = document.getElementById("canvas-water");
        let waverDrop = new WaverDrop();
        waverDrop.init(
          () => {
            canvasWater.onmousedown = (e) => {
              waverDrop.start(e.pageX, e.pageY);
            };
          },
          canvasWater,
          "https://file.idongjia.cn/T3.VxgBK_T1RCvBVdK.png"
        );
      })();
    </script>
  </body>
</html>

/**水波纹*/
class WaverDrop {
  constructor() {
    this.canvas = null;
    this.cxt = null;
    this.imgData = null;
    this.tempImageData = null;
    this.depth = 40;
    this.waveLen = 30;
    this.step = 0;
    this.w = 0;
    this.h = 0;
    this.n = 1.3333; //n=sin(a1)/sin(a2)	a2 = asin(sin(a1)/n)
    this.p = { x: 150.01, y: 150.01 };
    this.r = 0;
    this.slope = 0;
    this.slopeDeg = 0;
    this.inDeg = 0;
    this.outDeg = 0;
    this.shiftDeg = 0;
    this.dir = 0;
    this.shift = 0;
    this.shiftX = 0;
    this.shiftY = 0;
    this.position = 0;
    this.tmpDepth = 0;
    this.radius = 0;
    this.speed = 8;
    this.radiusWidth = 60;
    this.timerAnimate = 0;
    this.damp = 1;
  }
  init(backFun, canvas, url, width = null, height = null) {
    this.canvas = canvas;
    this.cxt = canvas.getContext("2d");
    let img = new Image();
    //取消跨域
    img.crossOrigin = "";
    img.onload = () => {
      this.canvas.width = width || img.width;
      this.canvas.height = height || img.height;
      this.cxt.drawImage(img, 0, 0, img.width, img.height);
      this.imgData = this.cxt.getImageData(0, 0, img.width, img.height);
      this.tempImageData = this.cxt.createImageData(this.imgData);
      this.w = this.canvas.width;
      this.h = this.canvas.height;
      if (backFun) {
        backFun();
      }
    };
    img.src = url;
  }
  start(xx = null, yy = null) {
    if (this.timerAnimate) clearInterval(this.timerAnimate);
    this.p = {
      x: (xx || this.p.x) + 0.01,
      y: (yy || this.p.y) + 0.01,
    };
    this.radius = 0;
    this.damp = 1;
    this.timerAnimate = setInterval(() => {
      this.draw();
    }, 40);
  }
  draw() {
    let t = new Date();
    this.step += 1;
    this.radius += this.speed;
    this.damp -= 0.01;
    for (let x = 0; x < this.w; x++) {
      for (let y = 0; y < this.h; y++) {
        let pxObj = this.getPoint(this.imgData, x, y);
        this.setPoint(this.tempImageData, x, y, pxObj);
      }
    }
    this.cxt.putImageData(this.tempImageData, 0, 0);
    if (this.damp < 0) {
      if (this.timerAnimate) clearInterval(this.timerAnimate);
      this.cxt.putImageData(this.imgData, 0, 0);
    }
  }
  getPoint(img, x, y) {
    this.r = Math.sqrt(
      (x - this.p.x) * (x - this.p.x) + (y - this.p.y) * (y - this.p.y)
    );
    if (this.r < this.radius) {
      this.position = ((this.r + this.step) / this.waveLen) * Math.PI * 2;
      this.tmpDepth = (Math.sin(this.position) * this.waveLen) / Math.PI / 2;
      this.slope = Math.cos(this.position);
      this.slopeDeg = Math.atan(this.slope);
      this.slopeDeg =
        (Math.abs(this.slopeDeg * Math.PI * 2) % 90) / (Math.PI * 2);
      this.inDeg = this.slopeDeg;
      this.outDeg = Math.asin(Math.sin(this.inDeg) / this.n);
      this.shiftDeg = this.inDeg - this.outDeg;
      this.shift =
        ((x - this.p.x) / Math.abs(x - this.p.x)) *
        Math.tan(this.shiftDeg) *
        (this.depth + this.tmpDepth) *
        this.damp;
      this.deg = Math.atan((y - this.p.y) / (x - this.p.x));
      this.shiftX = Math.cos(this.deg) * this.shift;
      this.shiftY = Math.sin(this.deg) * this.shift;
      x = Math.round(Math.max(0, Math.min(this.w - 1, x + this.shiftX)));
      y = Math.round(Math.max(0, Math.min(this.h - 1, y + this.shiftY)));
    }
    let i = (y * this.w + x) * 4;
    let pxObj = [];
    pxObj[0] = img.data[i];
    pxObj[1] = img.data[i + 1];
    pxObj[2] = img.data[i + 2];
    pxObj[3] = img.data[i + 3];
    return pxObj;
  }
  setPoint(img, x, y, obj) {
    let i = (y * this.canvas.width + x) * 4;
    img.data[i] = obj[0];
    img.data[i + 1] = obj[1];
    img.data[i + 2] = obj[2];
    img.data[i + 3] = obj[3];
  }
}