明天就回家过年了，今天没什么心思上班，看了下博客，发现一个黑客帝国额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. 深入 char

    深入 char * ,char ** ,char a[ ] ,char *a[] 内核分类: c语言 2013-02-23 15:34 15176人阅读 评论(8) 收藏 举报Charcharchar ...

  2. 程序员Meme 第02期

  3. Nginx区分搜索引擎

    目录 一.简介 二.配置 一.简介 场景: 当从百度点进来显示中文页面,而谷歌显示英文界面. 原理: 根据referer头来判断 二.配置 这样配置以后,凡是从百度或者google点过来的请求都会跳转 ...

  4. 学Java，Java书籍的最佳阅读顺序

    疫情以来,好久没出差了,今天出差去趟上海,早上 4 点多就起床了,到机场天都没亮.到登机口离起飞还一小时,趁着等飞机的时间,抓紧码字,把这篇文章收个尾. 今天和大家说说学 Java 的读书路线.路线中 ...

  5. [BUUCTF]PWN——mrctf2020_shellcode

    mrctf2020_shellcode 附件 步骤: 例行检查,64位程序,开启了relro和pie,没有nx,肯定是用shellcode最方便了 本地试运行一下,看看大概的情况 64位ida载入,根 ...

  6. .NET6中一些常用组件的配置及使用记录，持续更新中。。。

    NET6App 介绍 .NET 6的CoreApp框架,用来学习.NET6的一些变动和新特性,使用EFCore,等一系列组件的运用,每个用单独的文档篇章记录,持续更新文档哦. 如果对您有帮助,点击右上 ...

  7. CF41C Email address 题解

    Content 有一个字符串 \(s\),它满足以下要求: 只包含 ..@ 和小写字母. 不以 . 为开头或者结尾. 不以 @ 为开头或者结尾,并只能包含一个 @. 请将其进行如下操作,使得这个字符串 ...

  8. Python 线程池模块threadpool 、 concurrent.futures 的 ThreadPoolExecutor

    一.threadpool   基本用法 pip install threadpool pool = ThreadPool(poolsize) requests = makeRequests(some_ ...

  9. IDE Goland DEBUG报错（could not launch process: decoding dwarf section info at offset 0x0: too short）

    背景: 在升级GO版本到1.11后发现Goland的Debug报错,如下:could not launch process: decoding dwarf section info at offset ...

  10. IM服务器：编写一个健壮的服务器程序需要考虑哪些问题

    如果是编写一个服务器demo,比较简单,只要会socket编程就能实现一个简单C/S程序,但如果是实现一个健壮可靠的服务器则需要考虑很多问题.下面我们看看需要考虑哪些问题. 一.维持心跳 为何要维持心 ...