做了一个代码雨效果放在个人主页:  https://lanleilin.github.io/lanGallery/index.html

代码：

<!DOCTYPE html>

<html>

    <head>

        <title>The Matrix</title>

        <script type="text/javascript" src="../js/jquery.min.js">

        </script>

        <meta charset="utf-8">

        <script>

            $(document).ready(function() {

                //判断移动端还是PC端

                function isPC() {

                    var userAgentInfo = navigator.userAgent;

                    var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];

                    var flag = true;

                    for(var v = 0; v < Agents.length; v++) {

                        if(userAgentInfo.indexOf(Agents[v]) > 0) {

                            flag = false;

                            break;

                        }

                    }

                    return flag;

                }

                if(!isPC()) {

                    // 手机

                    var s = window.screen;

                    console.log(s);

                    var width = s.width * 2.5;

                    q.width = s.width * 2.5;

                    q.Height = 300;

                    var height = q.height;

                    var yPositions = Array(300).join(0).split('');

                    var ctx = q.getContext('2d');

                    var draw = function() {

                        ctx.fillStyle = 'rgba(0,0,0,.05)'; //反复生成opacity为0.5的半透明黑色背景

                        ctx.fillRect(0, 0, width, height);

                        ctx.fillStyle = 'lightgreen';

                        ctx.font = '3rem Georgia';

                        yPositions.map(function(y, index) {

                            text = String.fromCharCode(1e2 + Math.random() * 33); //随机生成字母

                            x = (index * 30) + 10; //x距离

                            q.getContext('2d').fillText(text, x, y); //在指定位置显示一个字母

                            if(y > Math.random() * 1e4) {

                                yPositions[index] = 0;

                            } else {

                                yPositions[index] = y + 20; //确定显示字母的位置

                            }

                        });

                    };

                    RunMatrix();

                    function RunMatrix() {

                        Game_Interval = setInterval(draw, 50); //设定刷新间隔

                    }

                } else {

                    var s = window.screen;

                    //      var q=$('#q');

                    console.log(typeof($("#q")));

                    console.log(document.getElementById("q"));

                    var width = q.width = s.width;

                    var height = q.height;

                    var yPositions = Array(300).join(0).split('');

                    var ctx = q.getContext('2d');

                    var draw = function() {

                        ctx.fillStyle = 'rgba(0,0,0,.05)';

                        ctx.fillRect(0, 0, width, height);

                        ctx.fillStyle = 'red';

                        ctx.font = '10pt Georgia';

                        yPositions.map(function(y, index) {

                            text = String.fromCharCode(1e2 + Math.random() * 33);

                            x = (index * 10) + 10; //x距离

                            q.getContext('2d').fillText(text, x, y);

                            if(y > Math.random() * 1e4) {

                                yPositions[index] = 0;

                            } else {

                                yPositions[index] = y + 10;

                            }

                        });

                    };

                    RunMatrix();

                    function RunMatrix() {

                        Game_Interval = setInterval(draw, 50);

                    }

                }

                isPC();

            });

        </script>

    </head>

    <body>

        <div align="center">

            <h1 id="theMatrix">The matrix</h1>

            <canvas id="q" width="500" height="500"></canvas>

        </div>

    </body>

</html>

theMatrix代码雨效果的更多相关文章

  1. JQuery实现——黑客帝国代码雨效果

    效果如你所见就是本页面上方那样的效果 实现方法来自一个印度小伙纸,学习完我也没总结一下,今儿个补上 如何实现,大家右键查看源码复制即可,不过学习的过程还是要总结总结. 下面通过另外两个小例子,一步一步 ...

  2. JAVA实现黑客帝国代码雨效果

    import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import j ...

  3. Canvas修行之黑客帝国代码雨

    既然是修行,不卖弄关子,不吊胃口,修行成果必须先晒一晒. 下图是我用canvas画的黑客帝国代码雨,想起当年看黑客帝国时,那个代码雨场景让我心旷神怡,大开脑洞,满脑子是那种三维空间,无数0和1像雨一样 ...

  4. 使用CodeMirror在浏览器中实现编辑器的代码高亮效果

    使用CodeMirror在浏览器中实现编辑器的代码高亮效果 在网站后台管理中希望能够对网站的样式表css与js文件以及模板html进行管理,在编辑的时候只是以普通文本展示又太普通,显得好难看,于是便在 ...

  5. 代码雨 html实现

    <!DOCTYPE html> <html>    <head>        <meta charset="utf-8">    ...

  6. css3 圣诞红包雨效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. 黑客帝国雨效果JS

    黑客帝国雨效果JS. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  8. 有一段<script>代码，效果是点击<p>就会弹出信息，但是有的<p>点击会有效果，有的没有效果

    问题:有一段<script>代码,效果是点击<p>就会弹出信息,但是有的<p>点击会有效果,有的没有效果 解决: 页面代码是至上而下执行的,如果你的这个标签在< ...

  9. <前端 js 实现 代码雨 >

    前端  js 实现 代码雨: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

随机推荐

  1. struts2之输入验证

    输入校验主要分为两种: 基于客户端的校验: 客户端校验主要作用是防止正常浏览者的误输入,仅能对输入进行初步过滤:对于一些用户恶意行为,客户端校验则无能为力. 基于服务端的校验: 服务器接收客户端提交的 ...

  2. 操作 Java 数组的 12 个最佳方法

    1.  声明一个数组 Java代码: String[] aArray = new String[5]; String[] bArray = {"a","b",& ...

  3. 第一章 UNIX 基础知识

    1.1 Unix体系结构 OS定义为一种软件,它控制计算机硬件资源,提供程序运行环境,一般称其为内核(kernel),它体积小,位于环境中心. 内核的接口为系统调用(system call),共用函数 ...

  4. Codeforces Round #462 (Div. 2) C DP

    C. A Twisty Movement time limit per test 1 second memory limit per test 256 megabytes input standard ...

  5. [CodeForces954G]Castle Defense（二分答案+差分）

    Description 题目链接 Solution 二分答案,套一个差分标记即可 每次放弓箭手显然越右边越优 Code #include <cstdio> #include <alg ...

  6. 笔记-Python-language reference-5.the import system

    笔记-Python-language reference-5.the import system 前言 经常用到import,module,对其中的机制及原理有一定的了解,但没有将各种信息前后连通起来 ...

  7. 笔记-python-lib-chardet

    笔记-python-lib-chardet 1.      chardet chardet是一个非常优秀的编码识别模块, 是python的第三方库,需要下载和安装. 文档地址:https://pypi ...

  8. 大数据江湖之即席查询与分析（下篇）--手把手教你搭建即席查询与分析Demo

    上篇小弟分享了几个“即席查询与分析”的典型案例,引起了不少共鸣,好多小伙伴迫不及待地追问我们:说好的“手把手教你搭建即席查询与分析Demo”啥时候能出?说到就得做到,差啥不能差人品,本篇只分享技术干货 ...

  9. 1，版本控制git--仓库管理

    ​ 再开始这个话题之前,让我想起了一件很痛苦的事情,在我大学写毕业论文的时候,我当时的文件是这样保存的 毕业论文_初稿.doc 毕业论文_修改1.doc 毕业论文_修改2.doc 毕业论文_修改3.d ...

  10. 设计模式--单例模式Singleton

    单例模式顾名思义整个程序下只有一个实例,例如一个国家只有一个皇帝,一个军队只有一个将军.单例模式的书写又分为饿汉模式和懒汉模式 饿汉模式   类中代码 package demo; public cla ...