黑客帝国雨效果JS。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    *{margin: 0;padding: 0;}

    body{overflow: hidden;}

    canvas{background: #111;}

    </style>

</head>

<body>

    <canvas id="canvas"></canvas>

    <script>

        var canvas = document.getElementById("canvas");

        var context = canvas.getContext("2d");

        var W = window.innerWidth;

        var H = window.innerHeight;

        canvas.width = W;

        canvas.height = H;

        var fontSize = 16;

        //计算列

        var colunm = Math.floor(W/fontSize);

        //console.log(colunm);

        //存储Y值

        var drops = [];

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

            drops[i] = 1;

        }

        //console.log(...drops)

        var str = "Welcome JavaScript";

        //let tempRandom = Math.random()*str.length;

        //console.log(tempRandom,Math.floor(tempRandom))

        //把文字画到屏幕上

        function draw(){

            context.fillStyle = "rgba(0,0,0,0.05)";//文字随机出现的背景

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

            context.font = "700 " + fontSize + "px ARIAL";

            context.fillStyle = "#00cc33";

            //context.fillStyle = randColor();

            //console.log("你好");

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

                //让字符串中的内容随机出现

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

                var x = i*fontSize;

                var y = drops[i]*fontSize;

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

                console.log(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,20);

    </script>

</body>

</html>

效果截图：

黑客帝国雨效果JS的更多相关文章

  1. theMatrix代码雨效果

    做了一个代码雨效果放在个人主页:  https://lanleilin.github.io/lanGallery/index.html 代码: <!DOCTYPE html> <ht ...

  2. 页面常见效果js实现

    2015.12.2 页面常见效果js实现 [有没有觉得很坑,[笑哭,邮箱写上]] 复习: Js内置对象: 1.浏览器对象 window document history location event  ...

  3. css3 圣诞红包雨效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  5. js仿黑客帝国文字数字雨效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. JQuery实现——黑客帝国代码雨效果

    效果如你所见就是本页面上方那样的效果 实现方法来自一个印度小伙纸,学习完我也没总结一下,今儿个补上 如何实现,大家右键查看源码复制即可,不过学习的过程还是要总结总结. 下面通过另外两个小例子,一步一步 ...

  7. JAVA实现黑客帝国代码雨效果

    import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import j ...

  8. 三种比较好玩的黑客效果JS代码（摘取）

    <html> <head> <title>The Matrix</title> <script src="http://ajax.goo ...

  9. 最牛的打字效果JS插件 typing.js

    最新在做公司的一个项目,需要实现一个敲打代码的动画效果,粗意味比较简单,果断自己直接开写,写着写着发现是一个坑.需要支持语法高亮,并不能直接简单的用setTimeout来动态附件innerHTML.苦 ...

随机推荐

  1. 移除VS解决方案和TFS服务器的关系

    有时候会遇到服务器IP服务器变更,甚至TFS服务器坏了,或者将项目重新上传至新的TFS区: 可以使用notepad之类的软件打开解决方案(.sln文件),删掉类似下面的部分: GlobalSectio ...

  2. 13 tcp3次握手 4次释放 mac和ip 访问百度的过程

    1.mac地址和ip地址的不同 (传棒棒糖) 需求:192.168.1.1  ping 192.168.2.1 1):获取默认的网关mac地址 2)寻找下一个网关的mac地址 3)mac地址在变,寻找 ...

  3. m2eclipse安装遇到的问题——备忘

    手贱把m2eclipse给卸载了,结果重新安装的时候,发现原来的网址不好用了,去官网查了发现改成了http://download.eclipse.org/technology/m2e/releases ...

  4. underscore.js 源码分析5 基础函数和each函数的使用

    isArrayLike 检测是数组对象还是纯数组 var property = function(key) { return function(obj) { return obj == null ? ...

  5. Java构造方法与析构方法实例剖析

    Java构造方法 类有一个特殊的成员方法叫作构造方法,它的作用是创建对象并初始化成员变量.在创建对象时,会自动调用类的构造方法. 构造方法定义规则:Java 中的构造方法必须与该类具有相同的名字,并且 ...

  6. 180727-时序数据库InfluxDB之备份和恢复策略

    influxdb 备份与恢复 参考: influxdb backup and restore 环境: influxdb v1.6.0 使用influx自动的控制台进行 I. 备份 备份命令 influ ...

  7. CF刷题-Codeforces Round #481-D. Almost Arithmetic Progression

    题目链接:https://codeforces.com/contest/978/problem/D 题解: 题目的大意就是:这组序列能否组成等差数列?一旦构成等差数列,等差数列的公差必定确定,而且,对 ...

  8. 1.6 JAVA高并发之线程池

    一.JAVA高级并发 1.5JDK之后引入高级并发特性,大多数的特性在java.util.concurrent 包中,是专门用于多线程发编程的,充分利用了现代多处理器和多核心系统的功能以编写大规模并发 ...

  9. HTML页面模板代码

    作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正 HTML页面模板代码 常用的页面模板 & ...

  10. Python3 解压序列

    一 普遍情况: x,y,z = 1,2,3 print("x:",x) # x:1 print("y:",y) # y:2 print("z:&quo ...