明天就回家过年了，今天没什么心思上班，看了下博客，发现一个黑客帝国额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. oc中调用c函数 实现将字符串转换成unsigned char

    帮助码友解决问题,从而复习了一下oc中调用c函数的方式 1,新建c 头文件  test.h 定义 c 函数 #ifndef test_h #define test_h void verificatio ...

  2. Mybatis-运行原理

    一.mybatis分层图 二.运行流程 根据全局配置文件创建sqlSessionFactory对象 根据全局配置文件的io流来构建SqlSessionFactoryBuilder对象: 解析(XmlC ...

  3. Linux基础命令---uptime

    uptime uptime指令用来显示系统运行多长时间.有多少用户登录.系统负载情况. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.SUSE.openSUSE. ...

  4. 2.7 Rust Structs

    A struct, or structure, is a custom data type that lets you name and package together multiple relat ...

  5. 一、手把手教你docker搭建fastDFS文件上传下载服务器

    在搭建fastDFS文件上传下载服务器之前,你需要准备的有一个可连接的linux服务器,并且该linux服务器上已经安装了docker,若还有没安装docker的,先百度自行安装docker. 1.执 ...

  6. SpringBoot+MybatisPlus实现批量添加的两种方式

    第一种: 因为Mysql数据每次发送sql语句的长度不能超过1M,所以,每次发送insert语句以固定长度发送: 将sql语句在provider中,以固定长度装入List集合中,然后返回service ...

  7. 记一次ssh连接慢

    2020-03-28日机房搬迁完后,发现有一台60服务器ssh连接特别慢,但是其他服务器正常; 下面是解决过程: vim /etc/ssh/sshd_config       (编辑配置文件) 查找F ...

  8. 基于Annotation（注解）的装配

    一.常用注解 1.@Component 是一种通用注解,可用于任何Bean 2.@Repository 通常用于注解DAO层类,即持久层 3.@Service 通常用于注解Service类,即服务层 ...

  9. HTTP隧道解决的问题

    转自别人的文章:https://blog.csdn.net/gogzf/article/details/78385506 客户端通常会用 Web 代理服务器代表它们来访问 Web 服务器.比如,很多公 ...

  10. 【教程】OBS直播推流教程（Windows & macOS）

    OBS Open Broadcaster Software | OBS (obsproject.com) Windows直播推流教程 Windows下OBS直播推流非常简单,本教程将会介绍,具体步骤如 ...