记录一下 vue 实现代码雨效果

<template>
    <div>
        <canvas id="myCanvas" ref="myCanvas" :width="data.innerWidth" :height="data.innerHeight"></canvas>
    </div>
</template>
<script setup>
    import { ref, onMounted, reactive } from 'vue';  
    var data = reactive({
        // charString: 'console.log("hellow word")',
        charString: '01010101',
        colors:[
            // '#33B5E5',
            // '#0099CC',
            // '#AA66CC',
            // '#9933CC',
            // '#669900',
            // '#FFBB33',
            // '#FF8800',
            // '#FF4444',
            // '#CC0000'
            'green'
        ],
        columnWidth: 12,
        fontSize: 12,
        innerWidth: window.innerWidth,
        innerHeight: window.innerHeight,
        ctx:null
    })
    console.log("window:", window)
    const myCanvas = ref(null);
    const columnCount = Math.floor(data.innerWidth / data.columnWidth)
    const rowCount = Math.floor(data.innerHeight / data.fontSize)
    const columnNextIndexs = new Array(columnCount).fill(rowCount+data.fontSize)
    const  getRandomChar = () => {
        return data.charString[Math.floor(Math.random() * data.charString.length)]
    }
    const getRandomColor = () =>  {
        return data.colors[Math.floor(Math.random() * data.colors.length)]
    }
    const draw = () => {
        data.ctx.fillStyle = `rgba(0, 0, 0, 0.05)`;
        data.ctx.fillRect(0, 0, window.innerWidth, window.innerHeight)
        /* 定义一下字体大小， 同时y坐标每行的所需高度就是字体大小的高度 */
        const fontsize = data.fontSize;
        /* 获取一个随机颜色用于字体绘制 */
        /* 设置字体格式和字体大小，这个随意自己设置 */
        data.ctx.font = `${fontsize}px "Microsoft YaHei"`;
        /* 循环列数次，同时每次计算出xy的坐标，因为是第一行所以y默认就是 1 * 字体高度 */
        for (let i = 0; i < columnCount; i++) {
            const x = i * data.columnWidth;
            // const y = 1 * fontsize
            const y = columnNextIndexs[i] * fontsize
                /* 绘制 三个参数分别是 字符  x坐标 y坐标 */
            data.ctx.fillStyle = getRandomColor();
            data.ctx.fillText(getRandomChar(), x, y)
            columnNextIndexs[i]++
            if(y > data.innerHeight && Math.random() > .9){
                columnNextIndexs[i] = 1
            }
        }
    }
    onMounted(() => {
        data.ctx = myCanvas.value.getContext('2d');
        draw()
        setInterval(()=> draw(),40)
    })
</script>
<style>
body{
    margin:0
}
#myCanvas{
    background-color: black;
}
</style>