骇客帝国代码雨

直接上源码吧，作为一个新手，玩一玩开心就好

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>rain</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    body {
      overflow: hidden;
    }
    #canvas {
      margin:0 auto;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width='300px' height="200px">
    Your browser doesn't support the canvas'.
  </canvas>

<script type="text/javascript">

  // 可设置 density = 1, 帮助理解代码原理
  const config = {
    // 背景初始值
    background: 'rgba(0,0,0,0.1)',
    // 字体
    font_size: 16,
    // 字体 css 属性
    font: '16px arial',
    // 字体色
    color: '#0F0',
    // 展示的字体数组
    charsArr: '0123456789qwertyuiopasdfghjklzxcvbnm'.split(''),
    // 消失率阈值, 可以调整 density 来调整密度
    density: 0.95,
    // 获取随机字符
    randomChar: (chars) => {
      return chars[Math.floor(Math.random() * chars.length)]
    },
  }

  // 初始化 dom, 绘图上下文 context, 存储数据的'筛子' boult
  const init = () => {
    const canvas = document.querySelector('canvas')
    canvas.width = screen.width
    canvas.height = screen.height
    let columns = Math.floor(canvas.width / config.font_size)
    let boult = new Array(columns).fill(1)
    // 全屏事件绑定
    canvas.addEventListener('click', () => {
      if(canvas.webkitRequestFullScreen){
        canvas.webkitRequestFullScreen()
      }else if(canvas.mozRequestFullScreen){
        canvas.mozRequestFullScreen()
      }else if(canvas.requestFullScreen){
        canvas.requestFullscreen()
      }else{
        console.log("your bowser doesn't support fullscr.")
      }
    })
    const context = canvas.getContext('2d')

    return {
      canvas, context, boult
    }
  }


  const draw = (canvas, context, boult) => {

    const { background, color, font_size, font, charsArr, density } = config
    // 函数分开取, 不然代码多了分不清
    const { randomChar } = config

    // 不断绘制透明度为0.1的长方形实现由灰变黑的过程，同时之前的字也会逐渐被覆盖，然后消失
    context.fillStyle = background
    context.fillRect(0, 0, canvas.width, canvas.height)
    context.fillStyle = color
    context.font = font

    for(let i = 0; i < boult.length; i++) {

      let text = randomChar(charsArr)
      let posX = i*font_size
      let posY = boult[i]*font_size
      context.fillText(text, posX, posY)

      if(posY > canvas.height || Math.random() > density) {
        //超出屏幕或者产生随机数超过density即重置这一个字符到初始位置
        boult[i] = 0
      }
      // 实现下滑
      boult[i]++
    }
  }

  const __main = () => {
    const { canvas, context, boult } = init()
    setInterval(()=>{
      draw(canvas, context, boult)
    }, 1000/40)
  }
  __main()

</script>
</body>
</html>
骇客帝国代码雨

直接上源码吧，作为一个新手，玩一玩开心就好

推荐阅读更多精彩内容
