在vue中使用canvas实现下雨特效

效果展示

在页面中添加canvas标签

<template>
  <div class="home">
    <canvas id="canvas" />
  </div>
</template>

初始化canvas

initCanvas() {
      const canvas = document.querySelector("#canvas");
      this.ctx = canvas.getContext("2d");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      init(this.ctx);
},

页面全部代码

<template>
  <div class="home">
    <canvas id="canvas" />
    <!-- 换成自己的图片 -->
    <img :style="canvasStyle" src="../assets/pic121.jpg" />
  </div>
</template>

<script>
import { init } from "@/components/rain.js";

export default {
  name: "Home",
  data() {
    return {
      canvasStyle: {
        position: "fixed",
        width: "100%",
        height: "100%",
        zIndex: "-1",
        left: "0",
        bottom: "0",
      },
      ctx: {},
    };
  },
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      const canvas = document.querySelector("#canvas");
      this.ctx = canvas.getContext("2d");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      init(this.ctx);
    },
  },
};
</script>

创建rain.js

// 画笔
var ctx;
// 画布的宽高
var w = window.innerWidth;
var h = window.innerWidth;
// 存放雨滴的数组
var arr = [];
// 雨滴的数量
var size = 150;
// 雨滴的构造函数
class Rain {
  x = random(w);
  y = random(h);
  ySpeed = random(2) + 5;
  show() {
    drawLine(this.x, this.y);
  }
  run() {
    if (this.y > h) {
      this.y = 0;
      this.x = random(w);
    }
    this.y = this.y + this.ySpeed;
  }
}
// 画线（雨滴）
function drawLine(x1, y1) {
  ctx.beginPath();
  ctx.strokeStyle = "#cccccc";
  ctx.moveTo(x1, y1);
  // 雨长度为30
  ctx.lineTo(x1, y1 + 30);
  ctx.stroke();
}
// 生成随机数
function random(num) {
  return Math.random() * num;
}
// 开始
function start() {
  for (var i = 0; i < size; i++) {
    var rain = new Rain();
    arr.push(rain);
    rain.show();
  }
  setInterval(() => {
    ctx.clearRect(0, 0, w, h);
    for (var i = 0; i < size; i++) {
      arr[i].show();
      arr[i].run();
    }
  }, 10);
}
// 初始化
function init(ctx1) {
  ctx = ctx1;
  start();
}
// 导出初始化函数
export { init };