ts实现代码雨

html

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>Documenttitle>
    <style>
      * {
        padding: 0;
        margin: 0;
        overflow: hidden;
      }
    style>
  head>
  <body>
    <canvas id="canvas">canvas>
    <script src="./index.js">script>
  body>
html>

代码没啥好说的, 就是去除一下浏览器的默认样式。然后创建一个canvas 元素

ts

const canvas = document.querySelector('canvas') as HTMLCanvasElement

canvas.width = screen.availWidth
canvas.height = screen.availHeight

const ctx = canvas.getContext('2d') as CanvasRenderingContext2D

let str = Array.from({ length: 10 }, (_, i) => i.toString())
let arr = Array(Math.ceil(screen.availWidth / 10)).fill(0)

const rain = () => {
  ctx.fillStyle = 'rgba(0,0,0,0.05)'
  ctx.fillRect(0, 0, screen.availWidth, screen.availHeight)
  ctx.fillStyle = '#0f0'
  arr.forEach((item, index) => {
    ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, item + 10)
    arr[index] = item > screen.availHeight || item > 20000 * Math.random() ? 0 : item + 10
  })
}
setInterval(rain, 60)

效果图

你可能感兴趣的:(html)