前端-原生-Canvas-云雾散开

古猜..

已于 2023-11-08 11:27:39 修改

阅读量551

点赞数

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

于 2022-05-25 12:09:21 首次发布

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

版权

前端专栏收录该内容

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/CloudOpen.js"></script>

    <style>
      body {
        margin: 0px;
      }
    </style>
  </head>
  <body>
    <!-- 拨开云雾见月明 -->
    <div>
      <canvas id="canvas-cloud"></canvas>
    </div>

    <script type="text/javascript">
      (function () {
        //云雾散开
        let cloudOpen = new CloudOpen();
        let canvasCloud = document.getElementById("canvas-cloud");
        cloudOpen.init(
          () => {
            //图片资源加载完成
            function loop() {
              //散开
              cloudOpen.draw(() => {
                //复原
                cloudOpen.reset();
                loop();
              });
            }
            loop();
          },
          canvasCloud,
          "https://file.idongjia.cn/T3F4CgB7_T1RCvBVdK.png",
          "https://file.idongjia.cn/T3o7WgB7KT1RCvBVdK.png",
          10
        );
      })();
    </script>
  </body>
</html>

class CloudOpen {
  constructor() {
    this.canv = null;
    this.ctx = null;
    this.i = 0;
    this.speed = 0;
    //遮罩云
    this.imgMask = new Image();
    this.imgMask.crossOrigin = "";
    //主图
    this.img = new Image();
    this.img.crossOrigin = "";
  }

  init(back, canvas, img, mask, speed = 10) {
    this.speed = speed;
    this.canv = canvas;
    this.ctx = this.canv.getContext("2d");
    this.i = 0;
    this.img.onload = () => {
      // 主图加载完成
      this.canv.width = this.img.naturalWidth;
      this.canv.height = this.img.naturalHeight;
    };
    this.imgMask.onload = () => {
      // 遮罩加载完成
      if (back) {
        back();
      }
    };
    //主图
    this.img.src = img;
    //遮罩云
    this.imgMask.src = mask;
  }
  step() {
    let maskX = (this.canv.width - this.i) / 2;
    let maskY = (this.canv.height - this.i) / 2;
    this.ctx.clearRect(0, 0, this.canv.width, this.canv.height);
    this.ctx.globalCompositeOperation = "source-over";
    this.ctx.drawImage(this.imgMask, maskX, maskY, this.i, this.i);
    this.ctx.globalCompositeOperation = "source-in";
    this.ctx.drawImage(
      this.img,
      0,
      0,
      this.img.naturalWidth,
      this.img.naturalHeight
    );
  }
  //复原
  reset() {
    this.i = 0;
    this.step();
  }
  draw(backFun = null) {
    this.i += this.speed;
    this.step();
    let maxSize = Math.max(this.canv.width, this.canv.height);
    if (this.i >= maxSize * 5) {
      //结束
      if (backFun) {
        backFun();
      }
    } else {
      window.requestAnimationFrame(() => {
        this.draw(backFun);
      });
    }
  }
}