明天就回家过年了，今天没什么心思上班，看了下博客，发现一个黑客帝国额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. Linux基础命令---mysqlimport导入数据库

    mysqlimport mysqlimport指令可以用来将文本文件中的数据导入到数据库.在导入文本文件的时候,必须确保数据库中有一张表,而且他的名字和文本文件的名字是一样的. 此命令的适用范围:Re ...

  2. zabbix之源码安装

    #:官网地址 https://www.zabbix.com/documentation/4.0/zh/manual/installation/install #:解压并创建用户 root@ubuntu ...

  3. Spring.DM版HelloWorld

    本文主要描述使用Spring.DM2.0,创建OSGi的HelloWorld演示程序,理解Spring.DM的OSGi框架实现机制.   环境描述: 项目 版本 Eclipse 3.7.x JDK 1 ...

  4. RunLoop基础知识以及GCD

    - 1.1 字面意思   a 运行循环   b 跑圈   - 1.2 基本作用(作用重大)   a 保持程序的持续运行(ios程序因而能一直活着不会死)    b 处理app中的各种事件(比如触摸事件 ...

  5. 【JAVA】【Basic】概念

    1. 历史 1.1. Sun, Green Project, 90年代初,为机顶盒提供一个统一的语言层,oak-->Java, James Gosling, Sun World 1995:JAV ...

  6. 【Service】【Database】【Oracle】Oracle client 12.1.0.2 for MacOS

    1. 概述:为了在我的macos上搭建python的cx_Oracle开发环境,首先需要配置oracle client 2. 环境与版本: 2.1. OS:Mac OS Sierra 10.12.2 ...

  7. 【Java 8】Optional 使用

    一.前言 如果要给 Java 所有异常弄个榜单,我会选择将 NullPointerException 放在榜首.这个异常潜伏在代码中,就像个遥控炸弹,不知道什么时候这个按钮会被突然按下(传入 null ...

  8. 【C/C++】习题3-3 数数字/算法竞赛入门经典/数组和字符串

    [题目] 把前n个(n<=10000)的整数顺序写在一起:123456789101112-- 数一数0~9各出现多少次(输出10个整数,分别是0,1,2,--,9出现的次数) [解答] 暴力求解 ...

  9. JS21. 使用原生JS封装一个公共的Alert插件（HTML5: Shadow Dom）

    效果预览 Shadow DOM Web components  的一个重要属性是封装--可以将标记结构.样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净.整 ...

  10. C# .exe和.dll文件图标资源提取工具

    Windows 可执行文件(.exe)和动态库文件(.dll)图标资源提取工具 GitHub 功能 图标资源预览 图标资源导出(仅支持导出 PNG 格式) 代码 获取图标资源使用了 Win32 API ...