javascript黑客帝国

Love The Way You Lie 2022-01-24 00:45 242阅读 0赞

## 黑客帝国 ##

<body>
        <canvas id="c"></canvas>
        <script>
            var canvas = document.getElementById("c");
            var ctx = canvas.getContext("2d");
    
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
    
            var str = "abcdefghi";
            var lie = window.innerWidth/20;
    
            var posY = [];
            for(var x = 0; x<lie; x++){
                posY[x] = 0;
            }
            console.log(posY)
            console.log(lie)
            function loop(){
                ctx.fillStyle = "rgba(0,0,0,0.05)";
                ctx.fillRect(0,0,canvas.width,canvas.height);
                for(var i = 0; i<lie ;i++){
                    ctx.font = "20px 微软雅黑";
                    ctx.fillStyle = "green";
                    ctx.fillText(str.charAt(Math.floor(Math.random()*str.length)),i*20,posY[i]*20);
                    posY[i]++;
    
                    if(posY[i]*20>window.innerHeight){
                        if(Math.random()>0.9){
                            posY[i] = 0;
                        }
    
                    }
                }
            }
            setInterval(loop,20);
        </script>
    </body>

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220124/9038ae6918bf4f2a8cc2b88f10ab4613.png

发表评论取消回复

表情：

评论列表（有 0 条评论，242人围观）

还没有评论，来说两句吧...

相关阅读

相关 Canvas魔法之黑客帝国特效

今天我们实现黑客帝国（The Matrix）风格的字母掉落效果。使用工具：Chrome浏览器（或其他支持H5的浏览器）使用语言：HTML + JavaScript + C...

逃离我推掉我的手/ 2024年04月23日 21:06/ 0 赞/ 59 阅读

相关通过Canvas画布制作黑客帝国背景

通过Canvas画布制作黑客帝国背景电影介绍先推荐一下这部电影 ![在这里插入图片描述][d7c7042ddc99483c9d9b481d3350ff5f.

╰+哭是因爲堅強的太久メ/ 2024年03月30日 15:38/ 0 赞/ 64 阅读

相关 python绘制黑客帝国

在Python中，你可以使用一些图形库来绘制类似于黑客帝国中的绿色字符。以下是一个使用`curses`库的简单示例： import curses d

末蓝、/ 2024年02月05日 14:58/ 0 赞/ 20 阅读

相关 Python 实现黑客帝国中的字符雨

注意本项目中，需要用到文件库“pygame”，不会的小伙伴，可以参考我的PyCharm教程里面有详细的讲解智汇返佣/智汇代理申请http://www.kaifx.c

雨点打透心脏的1/2处/ 2023年02月11日 07:19/ 0 赞/ 4 阅读

相关黑客帝国里的酷炫蓝光屏幕

发现的酷炫小工具-cmatrix，本人使用的centos，以下是安装步骤目录 1.安装依赖的软件 2.下载并安装Cmatrix 3.使用命令提示 ---------

ゝ一世哀愁。/ 2022年09月24日 11:23/ 0 赞/ 171 阅读

相关 canvas动画之三 -- 黑客帝国文字掉落效果

今天要实现的效果是黑客帝国里面的文字掉落效果，先来看一下图 ![黑客][SouthEast] [点击这里][Link 1]，查看demo 其实效果也是比较好实现的，只要计

Love The Way You Lie/ 2022年07月13日 01:37/ 0 赞/ 161 阅读

相关 HTML5 黑客帝国文字矩阵

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文字雨</title> <style

约定不等于承诺〃/ 2022年05月31日 05:22/ 0 赞/ 157 阅读

相关黑客帝国里的代码雨-java代码实现

我一直很好奇黑客帝国里的代码雨，感觉很酷，就一直搜集资料，尝试使用Java来实现，终于成功了，分享一下啊代码雨的实现用到的是jdk自身带的类库，可

Love The Way You Lie/ 2022年04月12日 07:15/ 0 赞/ 321 阅读

相关黑客帝国数字矩阵特效做法

![1160549-20170930183618325-10402312.png][] Shader源码： 1 Shader "_17th_Code/NumberM

雨点打透心脏的1/2处/ 2022年03月28日 14:30/ 0 赞/ 243 阅读

相关 javascript黑客帝国

黑客帝国 <body> <canvas id="c"></canvas> <script> var can

Love The Way You Lie/ 2022年01月24日 00:45/ 0 赞/ 242 阅读