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)
相关推荐
excel1 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel3 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼4 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping4 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙5 小时前
[译] Composition in CSS
前端·css
白水清风5 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix5 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278005 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端5 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧5 小时前
Promise 的使用
前端·javascript