黑客帝国中代码瀑布是怎么实现的呢？

我们可以通过 window.innerWidth获取屏幕的宽度W，并规定字符的大小size，那么屏幕中共有 W/size 列字符出现，

我们不断的去更改每一列中文字的y坐标，就可以实现文字运动的效果

没怎么学过js，但是代码还是很容易看懂的

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <style>

    *{padding:0;margin:0}

    html{overflow:hidden}

  </style>

 </head>

 <body>

    <canvas id="canvas" style="background:#111"></canvas>

    <script type="text/javascript">

        window.onload = function(){ //当页面加载时调用一下内容

            var canvas = document.getElementById("canvas");//获取画布对象

            var context =canvas.getContext("2d");//获取画布的上下文

            //获取浏览器屏幕的宽度和高度

            var W = window.innerWidth;

            var H = window.innerHeight;

            //设置canvas的宽度和高度

            canvas.width = W;

            canvas.height = H;

            var fontSize = 16;//每个文字的字体大小

            var colunms = Math.floor(W /fontSize);    //计算列

            var drops = [];//记录每列文字的y轴坐标

            for(var i=0;i<colunms;i++){//给每一个文字初始化一个起始点的位置

                drops.push(0);

            }

            var str ="javascript html5 canvas";//运动的文字

            //4:fillText(str,x,y);原理就是去更改y的坐标位置

            //绘画的函数

            function draw(){

                context.fillStyle = "rgba(0,0,0,0.05)";

                context.fillRect(0,0,W,H);

                //给字体设置样式

                context.font = "700 "+fontSize+"px  微软雅黑";

                //给字体添加颜色

                context.fillStyle ="#00cc33";//可以rgb,hsl, 标准色，十六进制颜色

                //写入画布中

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

                    var index = Math.floor(Math.random() * str.length);

                    var x = i*fontSize;

                    var y = drops[i] *fontSize;

                    context.fillText(str[index],x,y);

                    //如果要改变时间，肯定就是改变每次他的起点

                    if(y >= canvas.height && Math.random() > 0.99){

                        drops[i] = 0;

                    }

                    drops[i]++;

                }

            };

            function randColor(){

                var r = Math.floor(Math.random() * 256);

                var g = Math.floor(Math.random() * 256);

                var b = Math.floor(Math.random() * 256);

                return "rgb("+r+","+g+","+b+")";

            }

            draw();

            setInterval(draw,30);

        };

    </script>

 </body>

</html>

MatrixBG 代码瀑布的实现的更多相关文章

  1. AJAX异步实现简单的瀑布流

    传统瀑布流布局ul-li,需要先设定显示几列,每列是一个li,需要左浮动并指定宽度,li里面的布局也要先布局好,主要是要定宽,高度自动:然后通过ajax异步,从数据库中得到数据,遍历后将数据插入最矮的 ...

  2. [最直白版]一步一步教你用VMware Workstation12安装Ubuntu 16.04和VMware Tools的教程

    [最直白版]Win10下一步一步教你用 VMware Workstation12安装Ubuntu 16.04和VMware Tools的教程 安装过程中使用的软件(要保证电脑里面有下列三个东西): 1 ...

  3. jquery瀑布流排列样式代码

    <!DOCTYPE html><html><head lang="en"> <meta charset="gb2312" ...

  4. 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  5. Grid布局20行代码快速生成瀑布流

    网格布局 Grid 布局,好用又简单,至少比 Flex 要人性化一点,美中不足就是浏览器支持度差点. DOM结构 中间夹层为了后续拓展. CSS .grid { display: grid; grid ...

  6. web前端学习笔记-瀑布流的算法分析与代码实现

    瀑布流效果目前应用很广泛,像花瓣,新浪轻博,蘑菇街,美丽说等好多网站都有.也有好多支持该效果的前段框架,今天学习了一下这种效果的实现,不依赖插件,自己动手分析实现过程,为了便于叙述清楚,分析中的一些名 ...

  7. iOS开发：代码通用性以及其规范 第一篇（附带，自定义UITextView\进度条\双表显示\瀑布流 代码设计思路）

    在iOS团队开发中,我见过一些人的代码,也修改过他们的代码.有的人的代码写的非常之规范.通用,几乎不用交流,就可以知道如何修改以及在它基础上扩展延生.有的人的代码写的很垃圾,一眼看过去,简直会怀疑自己 ...

  8. js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  9. Jquery简单瀑布流代码示例

    最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...

随机推荐

  1. sqlserver Timeout 时间已到。在操作完成之前超时时间已过或服务器未响应

      随着数据库数据的不断增大,查询时间也随之增长.今天在之前一个项目中执行数据库查询超过30秒就报“Timeout 时间已到.在操作完成之前超时时间已过或服务器未响应.”了,网上找了些文章,是在.co ...

  2. 关于处理iis8.0中设置Request.BinaryRead 不允许操作的解决方法

    iis6.0解决方案: 起初我刚开始上传的是小文件运行都是正常的,后来我弄个文件大点的上传看程序运行怎么样?就上面的问题,在网上搜索正好找到跟我一样的问题,拿过来自己记录下.其中行62指的是:oUpF ...

  3. 8个Python小Tips

    原创: 金牌小编  行走在Python的江湖,那能不收藏一些锦囊妙计,今天分享给大家8个小技巧,希望在实战的时候有帮助! 01. 条件判断   condition=Trueif condition:  ...

  4. BZOJ4653 尺取法 + 线段树

    https://www.lydsy.com/JudgeOnline/problem.php?id=4653 首先很容易想到离散之后排序,用线段树或者树状数组去维护. 问题在于按照什么排序,如果按照左端 ...

  5. 用go实现一个redis-cli

    转载文章:https://my.oschina.net/liangwt/blog/2231557?origin= 代码样例:https://github.com/liangwt/redis-cli

  6. 设计模式---接口隔离模式之中介者模式（Mediator）

    一:概念 在Mediator模式中,类之间的交互行为被统一放在Mediator的对象中,对象通过Mediator对象同其他对象交互.Mediator对象起到控制器的作用 二:动机 在软件构建的过程中, ...

  7. Project facet Java version 1.8 not supported

    把其它的项目到自己的eclipse中后,进行运行项目之后,就会提示为“Project facet Java version 1.8 not supported”.   进行更改配置,进行右键项目就会弹 ...

  8. [转]Red Hat Linux相关产品iso镜像下载【百度云】

    超强汇总!献上大佬链接:http://www.linuxfly.org/post/659/ 还有一些可用链接: 下面的直接复制到迅雷下载,链接是打不开的. RHEL 5.4 ISO下载http://r ...

  9. HDU 1284(钱币兑换 背包/母函数)

    与 HDU 1028 相似的题目. 方法一:完全背包. 限制条件:硬币总值不超过 n. 目标:求出组合种数. 令 dp[ i ][ j ] == x 表示用前 i 种硬币组合价值为 j 的钱共 x 种 ...

  10. sublime text3支持Vue文件高亮显示

    sublime text 默认打开.vue文件全部都是白色的,不是特别方便.安装插件可以做到代码高亮显示 1.插件vue-syntax-highlight 下载地址:github https://gi ...