明天就回家过年了，今天没什么心思上班，看了下博客，发现一个黑客帝国额js版本，地址：https://blog.csdn.net/zhongyi_yang/article/details/53841805

　　然后做了一点封装，这里也贴出来分享一下：

<!DOCTYPE html>

<html>

<head lang="zh-cn">

    <meta http-equiv=Content-Type content="text/html; charset=utf-8">

    <title>简单的黑客帝国效果</title>

</head>

<body style="height:2000px">

    <script type="text/javascript">

        (function (window) {

            var hackerCache = {};

            //默认配置

            function makeCfg(cfg) {

                cfg = cfg || {};

                var _cfg = {

                    canvas: "hacker_matrix" + ((Math.random() * 10000) >> 0),

                    height: window.innerHeight,

                    width: window.innerWidth,

                    fontSize: 16,

                    fontColor: "#0F0",

                    fontSyle: "16px arial",

                    seeds: "0123456789abcdefghijklmnopqrstuvwxyz",

                    fillStyle: 'rgba(0, 0, 0, 0.05)',//这里只能是rgba格式,好像用ctx.globalAlpha也能做透明度

                    breaks: 0.98

                };

                for (var key in _cfg) {

                    _cfg[key] = cfg[key] || _cfg[key];

                }

                return _cfg;

            }

            function hacker(cfg) {

                cfg = makeCfg(cfg);

                var canvas = document.getElementById(cfg.canvas);

                //高度及初始化

                var altitudes = [], ctx, texts = cfg.seeds.split('');

                if (!canvas) {

                    canvas = document.createElement("canvas");

                    canvas.id = cfg.canvas;

                    canvas.height = cfg.height;

                    canvas.width = cfg.width;

                    document.body.appendChild(canvas);

                }

                var cache = hackerCache[canvas.id];

                if (!cache) {

                    ctx = canvas.getContext('2d');

                    var columns = canvas.width / cfg.fontSize;

                    for (var i = 0; i < columns; i++) {

                        altitudes[i] = 1;

                    }

                    hackerCache[canvas.id] = {

                        context: ctx,

                        altitudes: altitudes,

                        interval: undefined

                    }

                    cache = hackerCache[canvas.id];

                }

                altitudes = cache.altitudes;

                ctx = cache.context;

                //逐行输出

                function drawLine() {

                    ctx.fillStyle = cfg.fillStyle;

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

                    //文字颜色

                    ctx.fillStyle = cfg.fontColor;

                    ctx.font = cfg.fontSyle;

                    for (var i = 0; i < altitudes.length; i++) {

                        var altitude = altitudes[i];

                        var y = altitude * cfg.fontSize;

                        var text = texts[Math.floor(Math.random() * texts.length)];

                        ctx.fillText(text, i * cfg.fontSize, y);

                        if (y > canvas.height && Math.random() > cfg.breaks) {

                            altitude = 0;

                        }

                        altitudes[i] = ++altitude;

                    }

                }

                this.start = function () {

                    if (cache.interval === undefined) {

                        cache.interval = setInterval(function () {

                            drawLine();

                        }, 33);

                    }

                };

                this.stop = function () {

                    cache.interval = cache.interval && clearInterval(cache.interval);

                }

            }

            window.hacker = hacker;

        })(window);

        window.onload = function () {

            //new hacker().start();

            new hacker({ canvas: "canvas1" }).start();

            new hacker({ canvas: "canvas2" }).start();

            new hacker({ canvas: "canvas3" }).start();

            new hacker({ canvas: "canvas4" }).start();

        }

    </script>

    <canvas id="canvas1" width="400" height="400"></canvas>

    <canvas id="canvas2" width="400" height="400"></canvas>

    <canvas id="canvas3" width="400" height="400"></canvas>

    <canvas id="canvas4" width="400" height="400"></canvas>

</body>

</html>

黑客帝国纯js版的更多相关文章

  1. jQuery下实现等待指定元素加载完毕(可改成纯js版)

    http://www.poluoluo.com/jzxy/201307/233374.html 代码如下: jQuery.fn.wait = function (func, times, interv ...

  2. 纯JS文本在线HTML编辑器KindEditor

    KindEditor(http://www.kindsoft.net)是一款比较专业,主流,好用的在线HTML编辑器. 它除了可以将文本进行编辑.将Word中的内容复制进来外,本身还可以拖动缩放(右下 ...

  3. Ajax，纯Js+Jquery

    AJAX:Asynchronous Javascript and xml 异步,Js和Xml 交互式网页开发 不刷新页面,与服务器交互 详情请参照Jquery工具指南用在浏览器端的技术,无刷新,通过X ...

  4. 纯css和js版下拉菜单

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

  5. javascript日历控件——纯javascript版

    平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. < ...

  6. 纯JS实现俄罗斯方块，打造属于你的游戏帝国

    纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...

  7. Twitter面试题蓄水池蓄水量算法(原创 JS版，以后可能会补上C#的)

    之前在群里有人讨论Twitter的面试题,蓄水池蓄水量计算,于是自己写了个JS版的(PS:主要后台代码还要编译,想想还是JS快,于是就使用了JS了.不过算法主要还是思路嘛,而且JS应该都没问题吧^_^ ...

  8. 【干货】JS版汉字与拼音互转终极方案，附简单的JS拼音输入法

    前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多音字,有的不支持声调,有的字典文件太大,还比如有时候我仅仅是需要获取汉字拼音首字母却要引入200kb的字 ...

  9. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）

          Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...

随机推荐

  1. archive后upload to app store时遇到app id不可用的问题

    问题如下图 出现此问题的原因有两种: 1.此app id在AppStore中已经存在,也就是说你使用别人注册的app ID ,  如果是这样,你只能更换app ID 2.此app ID是自己的,突然之 ...

  2. redis入门到精通系列（一）

    (一)为什么要用Nosql 如果你是计算机本科学生 ,那么一定使用过关系型数据库mysql.在请求量小的情况下,使用mysql不会有任何问题,但是一旦同时有成千上万个请求同时来访问系统时,就会出现卡顿 ...

  3. shell awk命令字符串拼接

    本节内容:awk命令实现字符串的拼接 输入文件的内容: TMALL_INVENTORY_30_GROUP my163149.cm6 3506 5683506 mysql-bin.000013 3273 ...

  4. Quartz使用AutoFac依赖注入问题小结

    theme: channing-cyan highlight: a11y-dark 背景 最近在做一个需求,就是在Job中捕捉异常,然后通过邮件或者消息的方式推送给指定人员,在需求实现的过程中遇到的一 ...

  5. linux重启后JDk环境变量配置失效最终解决方案

    最终解决方案:https://bbs.deepin.org/forum.php?mod=viewthread&tid=147762 其实这个修改可能也存在问题,如果有耐心的可以每次打开终端   ...

  6. Windows下安装xampp的PHP扩展(redis为例)

    (1)PHP的windowns扩展下载网址:https://windows.php.net/downloads/pecl/releases/ (2)Ctrl+f查询你要下载的扩展名 注意:扩展的版本要 ...

  7. CF1082A Vasya and Book 题解

    Content 给定 \(T\) 组数据,每组数据给出四个整数 \(n,x,y,d\).小 V 有一本 \(n\) 页的书,每次可以恰好翻 \(d\) 页,求从第 \(x\) 页恰好翻到第 \(y\) ...

  8. Sharepoint 恢复列表文件

    当在Sharepoint中恢复列表字段,列表数据时,恢复的是stp文件,可按照如下步骤恢复: 1.打开http://liuqiang17-1/sites/flsharepoint/_catalogs/ ...

  9. JAVA日期Date格式转corn表达式

    date转corn 定时任务获取corn /*** * 日期转corn表达式 * @param date 日期 * @return */ public static String getCron(Da ...

  10. Tomcat高级特性及性能调优

    Tomcat对Https的支持 HTTPS简介 Https,是以安全为目标的Http通道,在Http的基础上通过传输加密和身份认证保证了传输的安全性.HTTPS在HTTP的基础上加入SSL层,HTTP ...