明天就回家过年了，今天没什么心思上班，看了下博客，发现一个黑客帝国额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. 项目cobbler+lamp+vsftp+nfs+数据实时同步（inotify+rsync)

    先配置好epel源 [root@node3 ~]#yum install epel-release -y 关闭防火墙和selinux [root@node3 ~]#iptables -F [root@ ...

  2. 使用cookie记录用户上次访问网页的时间，并返回到页面

    package com.hopetesting.cookie;import javax.servlet.ServletException;import javax.servlet.annotation ...

  3. C# 温故知新 第一篇 C# 与 .net 的关系

    C# 与.net 的关系很多初学者或者未从事过.net 研发的编程人员 都不是很清楚,认为 C# 与.net 是一回事. 我们经常说java开发,C++开发,指的是两种开发语言:但是 经常看到 .ne ...

  4. Mysql资料 Binlog

    目录 一.简介 二.开启binlog及相关参数 开启 相关操作 三.查看binlog日志 使用mysqlbinlog自带查看命令法 mysql加载方式查询 四.恢复数据 五.命令参数 一.简介 MyS ...

  5. GIS应用|快速开发在线路径导航应用

    导航应用可用于路径规划及仿真,并且常作为一个重要模块融入到各类企业管理业务中,如面向物流管理.商品配送.车辆监控等场景,那么如何开发一个简单的在线路径导航应用呢?SuperMap Online为您解答 ...

  6. 关于Too many levels of symbolic links和 /usr/bin/env: node: 没有那个文件或目录

    由于node装了两遍在运行bower install的时候就会报错Too many levels of symbolic links要卸载其中一个nodejs,卸载的方法: 1. 卸载node npm ...

  7. IDEA中安装SVN

     下载svn和汉化安装包:   (下面安装过程中,运行这两个安装包需要管理员权限:使用管理员权限运行cmd,在cmd中运行这两个安装包)   1.安装SVN 安装SVN时这里要选择[will be i ...

  8. Java编程思想—读书笔记(更新中)

    第1章 对象导论 1.4 被隐藏的具体实现 访问控制的原因: 让客户端程序员无法触及他们不应该触及的部分(不是用户解决特定问题所需的接口的一部分) 允许库设计者可以改变类内容的工作方式而不用担心会影响 ...

  9. CF897B Chtholly's request 题解

    Content 我们将长度为偶数的回文数称作 zcy 数,比如 \(11,1221\) 是 zcy 数,而 \(34,121\) 不是.假设第 \(i\) 个 zcy 数为 \(a_i\),求 \(\ ...

  10. Python sys模块 os模块、OS.open() | open() | OS._exit() | sys.exit() | exit()

    sys模块:负责程序和Python交互. sys常用方法:===========================  sys.stdout.write('please:')val = sys.stdin ...