最好看的代码雨特效

好喝的西北风

已于 2023-03-20 10:09:29 修改

阅读量299

点赞数 2

分类专栏： javascript 文章标签： javascript 开发语言 Powered by 金山文档

于 2023-03-17 22:15:05 首次发布

本文链接：https://blog.csdn.net/weixin_43340372/article/details/129629227

版权

javascript 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

上代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>代码雨</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      overflow: hidden;
    }
  </style>
</head>

<body>
  <canvas id="rain" style="background-image: linear-gradient(blue,red,yellow)"></canvas>
  <script>
    <!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>代码雨</title>
</head>

<body>
  <canvas id="rain" style="background-image: linear-gradient(blue, black, red);"></canvas>
</body>
<script>
  class CodeRain {
    constructor(canvas, width, height, fontSize) {
      this.fontSize = fontSize
      // 保存画布为类变量,方便使用
      this.canvas = canvas
      this.canvas.width = width
      this.canvas.height = height
      // 拿到画笔
      this.pencel = canvas.getContext("2d")
      // 画布的宽
      this.width = width
      // 画布的高
      this.height = height
      // 计算列数
      const columnsNum = Math.floor(width / fontSize)
      // 初始化数组长度
      this.drops = new Array(columnsNum)
      // 设置数组的初始值
      this.drops.fill(1)
    }
    // 获取随机字符
    getRandomStr() {
      return Math.random().toString(36).slice(12).substr(0, 1)
    }

    // 获取随机颜色
    getRandomColor() {
      const r = Math.floor(Math.random() * 256)
      const g = Math.floor(Math.random() * 256)
      const b = Math.floor(Math.random() * 256)
      return `rgb(${r},${g},${b})`
    }

    // 鬼画符
    draw() {
      // 设置覆盖色
      this.pencel.fillStyle = "rgba(0,0,0,0.1)"
      this.pencel.fillRect(0, 0, this.width, this.height)
      // 设置字体样式
      this.pencel.font = `600 ${this.fontSize}px 微软雅黑`
      // 设置字体的填充颜色
      this.pencel.fillStyle = this.getRandomColor()
      // 有多少列就画多少个字符
      this.drops.forEach((item, index) => {
        // 设置x方向的坐标
        const x = index * this.fontSize
        // // 设置Y方向坐标
        const y = this.drops[index] * this.fontSize
        // // 设置需要填充的字体
        this.pencel.fillText(this.getRandomStr(), x, y)
        if (y > this.height && Math.random() > 0.99) {
          this.drops[index] = 0
        }
        this.drops[index]++
      })
    }
  }
  // 获取画布节点
  let el = document.getElementById("rain")
  const _w = window.innerWidth
  const _h = window.innerHeight
  // 创建画布实例，传入必要参数
  let codeRain = new CodeRain(el, _w, _h, 16)
  setInterval(() => {
    codeRain.draw()
  }, 30);

</script>

</html>
  </script>
</body>

</html>

写这篇文章的目的呢仅仅是为了练习以下js。离职状态长时间不写代码容易手生😁

老铁们，如果认可老弟我的代码请给个666，如果不认可请给个666，如果很不认可请给个666