JavaScript实现代码雨

一、功能描述

使用canvas实现一个代码雨的功能,炫一个~~~

二、上码

html

html 复制代码
 <canvas id="canvas"></canvas>

js

javascript 复制代码
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');
        // screen.availWidth:可视区域的宽度
        canvas.width = screen.availWidth;
        canvas.height = screen.availHeight;

        let str = 'zyk01010168'.split('');
        const px = 10;
        let arr = Array(Math.ceil(canvas.width / px )).fill(0)
        const rain = () => {
            //使用,0.05模糊,每次都重叠绘制。看出虚幻的效果
            ctx.fillStyle = 'rgba(0,0,0,0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#00FF00';
            arr = arr.map((ele,index) => {
                //横向间隔px的距离显示字母
                ctx.fillText(str[Math.floor(Math.random() * str.length)], index * px, ele + px);
                //修改纵向坐标
                return (ele > canvas.height || ele > 5000 * Math.random()) ? 0 : ele+ 10
            });
        }
        setInterval(rain, 40)
相关推荐
IT_陈寒19 小时前
Redis 性能翻倍的 5 个隐藏技巧,99% 的开发者都不知道第3点!
前端·人工智能·后端
街尾杂货店&19 小时前
css word属性
前端·css
fruge1 天前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化
aesthetician1 天前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
demi_meng1 天前
reactNative 遇到的问题记录
javascript·react native·react.js
千码君20161 天前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao20091 天前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔1 天前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼1 天前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder1 天前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js