駭客帝國代碼雨

直接上源碼吧，作為一個新手，玩一玩開心就好

<!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">

  // 可設(shè)置 density = 1, 幫助理解代碼原理
  const config = {
    // 背景初始值
    background: 'rgba(0,0,0,0.1)',
    // 字體
    font_size: 16,
    // 字體 css 屬性
    font: '16px arial',
    // 字體色
    color: '#0F0',
    // 展示的字體數(shù)組
    charsArr: '0123456789qwertyuiopasdfghjklzxcvbnm'.split(''),
    // 消失率閾值, 可以調(diào)整 density 來調(diào)整密度
    density: 0.95,
    // 獲取隨機(jī)字符
    randomChar: (chars) => {
      return chars[Math.floor(Math.random() * chars.length)]
    },
  }

  // 初始化 dom, 繪圖上下文 context, 存儲數(shù)據(jù)的'篩子' 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
    // 函數(shù)分開取, 不然代碼多了分不清
    const { randomChar } = config

    // 不斷繪制透明度為0.1的長方形實(shí)現(xiàn)由灰變黑的過程，同時之前的字也會逐漸被覆蓋，然后消失
    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) {
        //超出屏幕或者產(chǎn)生隨機(jī)數(shù)超過density即重置這一個字符到初始位置
        boult[i] = 0
      }
      // 實(shí)現(xiàn)下滑
      boult[i]++
    }
  }

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

</script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容