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)
相关推荐
华仔啊19 分钟前
用 Vue3 + Canvas 做了个超实用的水印工具,同事都在抢着用
前端·vue.js·canvas
Bacon1 小时前
前端:从0-1实现一个脚手架
前端
Bacon1 小时前
前端项目部署实战 nginx+docker持续集成
前端
beckyye1 小时前
阿里云智能语音简单使用:语音识别
前端·语音识别·录音
东东2331 小时前
前端规范工具之husky与lint-staged
前端·javascript·eslint
jump6801 小时前
手写事件总线、事件总线可能带来的内存泄露问题
前端
岁月宁静2 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
执沐2 小时前
基于HTML 使用星辰拼出爱心,并附带闪烁+流星+点击生成流星
前端·html
atwednesday2 小时前
日志处理
javascript
#做一个清醒的人2 小时前
【electron6】Web Audio + AudioWorklet PCM 实时采集噪音和模拟调试
前端·javascript·electron·pcm