黑客帝国雨效果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. Easyui 控件的初始化方法

    问题: Easyui的控件在初始化的时候有两种方式: 页面指定class属性 js里初始化该id为easyui的控件 那么问题是: 如果页面不指定class属性,只是使用js初始化的话,会导致无法用控 ...

  2. [NOIp2018]货币系统 背包

    LG传送门 完全背包板子题 显然就是判断有多少种面值的货币可以被其他面值的货币表示,完全背包搞一搞就好了. 考场代码(一看这两格缩进就知道是考场代码): #include<cstdio> ...

  3. 探寻ASP.NET MVC鲜为人知的奥秘（3）：寻找多语言的最佳实践方式

    如果你的网站需要被世界各地的人访问,访问者会使用各种不同的语言和文字书写习惯,那么创建一个支持多语言的网站就是十分必要的了,这一篇文章就讲述怎么快速合理的创建网站对多语言的支持.接下来通过一个实例来讲 ...

  4. 【MySQL函数】日期篇

    1.date_format()函数 date_format(createtime,'%Y') 年 date_format(createtime,'%Y-%m') 年月 date_format(crea ...

  5. 深入解析QML引擎， 第1部分:QML文件加载

    译者注:这个解析QML引擎的文章共4篇,分析非常透彻,在国内几乎没有找到类似的分析,为了便于国内的QT/QML爱好者和工作者也能更好的学习和理解QML引擎,故将这个系列的4篇文章翻译过来.翻译并不是完 ...

  6. pytest使用笔记（一）

    使用环境及预置条件:pycharm+win10+python3.6+pytest 1,创建示范的测试功能脚本,另存为test_sample.py,代码如下: # test_sample.py def ...

  7. Jenkins单元测试

    Jenkins提供了一个开箱即用功能来选择JUnit,并提供了一系列的插件进行单元测试等技术,一个例子是 MSTest 的.Net单元测试.如果你打下面的链接 https://wiki.jenkins ...

  8. 会声会影2018提示dll文件丢失怎么办？

    一些会声会影2018用户,在安装.使用软件的过程中,会出现dll缺失的提示,导致软件无法打开,那么,出现这一问题要怎么解决.接下来小编为大家具体介绍下两种解决方法. 图1:dll丢失提示 打开会声会影 ...

  9. Sublime Text 3高效实用快捷键

    2017-11-27 16:18:48 Sublime Text 3 高效实用快捷键 Sublime Text 3 软件及注册码 官网下载链接在这里,有时候会很神奇的上不去,可能是因为被Q了,可能就是 ...

  10. linux 命令自动补全包

    linux 其他知识目录 rhel7如果使用最小化安装后,tab键默认是不能自动补全命令的 执行yum install bash-completion之后重启系统正常.