canvas实现数字雨_maxshowcnt-CSDN博客

本文链接：https://blog.csdn.net/qq_27323623/article/details/122131355
闲来无事，用js实现了一波数字雨，效果如下：
代码如下：
<!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>Document</title>
    <style>
        *, body {
            margin: 0;
            padding: 0;
        }
        body {
            overflow: hidden;
        }
        canvas {
            background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="canvas" style="background-color: #000;"></canvas>
</body>
<script>
    const canvasEl = document.getElementById('canvas')
    const ctx = canvasEl.getContext('2d')
    const canvasWidth = window.innerWidth
    const canvasHeight = window.innerHeight
    canvasEl.width = canvasWidth
    canvasEl.height = canvasHeight
    if (ctx) {
        let aryData = []
        const fontSize = [8, 24]
        const [minFontSize, maxFontSize] = fontSize
        const compareVal = 0.5
        const maxShowCnt = 200
        const fontVerticalMargin = [5, 30]
        const [minFontVerticalMargin, maxFontVerticalMargin] = fontVerticalMargin
        const speed = 3000 / 40
        this.timer = setInterval(() => {
            aryData = aryData.slice(0, maxShowCnt)
            ctx.clearRect(0, 0, canvasWidth, canvasHeight)
            const emptyIndex = aryData.findIndex(item => item.list.every(e => e === ''))
            !!~emptyIndex && aryData.splice(emptyIndex, 1)
            const randomVal = Math.random()
            const createNewRandomData = () => parseInt(String(Math.random() * 10))
            const addNewData = target => target.unshift(createNewRandomData())
            const updateRowData = ({ index, list, length }) => {
                for (let i = index; i > 0; i--) {
                    list[i] = list[i - 1]
                }
                if (index < length - 1) {
                    list[0] = createNewRandomData()
                } else {
                    list[0] = ''
                }
            }
            if (randomVal > compareVal) {
                const fontSize = minFontSize + Math.ceil((maxFontSize - minFontSize) * Math.random())
                const fontVerticalMargin = minFontVerticalMargin + Math.ceil((maxFontVerticalMargin - minFontVerticalMargin) * Math.random())
                aryData.push({
                    list: [createNewRandomData()],
                    fontSize: fontSize,
                    fontVerticalMargin: fontVerticalMargin,
                    length: Math.ceil(canvasHeight / (fontSize + fontVerticalMargin)),
                    x: canvasWidth * Math.random(),
                    index: 1
                })
            }
            aryData.forEach(item => {
                if (item.index === 0) {
                    addNewData(aryData.list)
                    item.index++
                } else if (item.index <= item.length - 1) {
                    updateRowData(item)
                    item.index++
                } else {
                    item.index--
                }
                item.list.forEach((colItem, colIndex) => {
                    ctx.fillStyle = `rgba(255, 255, 0, ${ parseFloat(Math.abs(1 - (colIndex - 1 - colIndex / 8) / colIndex).toFixed(1)) })`
                    ctx.font = `${item.fontSize}px Microsoft YaHei`
                    ctx.fillText(colItem, item.x, (item.fontSize + item.fontVerticalMargin) * colIndex)
                })
            })
        }, speed)
    }
</script>
</html>