<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>王小卓雅月中愁</title>
        <style type="text/css">
            html,body{width: 100%;height: 850px;}
            body{
                background: #000;
                overflow: hidden;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <canvas id="cvs"></canvas>
        <script type="text/javascript">
            var cvs = document.getElementById("cvs"); 
            var ctx = cvs.getContext("2d");
            var cw = cvs.width = document.body.clientWidth;
            var ch = cvs.height = document.body.clientHeight; 
            //动画绘制对象
            var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
            var codeRainArr = []; //代码雨数组
            var cols = parseInt(cw/14); //代码雨列数
            var step = 26 ;    //步长，每一列内部数字之间的上下间隔
            ctx.font = "bold 26px microsoft yahei"; //声明字体，个人喜欢微软雅黑

function createColorCv() {
//画布基本颜色
ctx.fillStyle="#242424";
ctx.fillRect(0,0,cw,ch); 
}

//创建代码雨
            function createCodeRain() {
                for (var n = 0; n < cols; n++) {
                    var col = []; 
                    //基础位置，为了列与列之间产生错位
                    var basePos = parseInt(Math.random()*300);
                    //随机速度 3~13之间
                    var speed = parseInt(Math.random()*10)+3;
                    //每组的x轴位置随机产生
                    var colx = parseInt(Math.random()*cw)

//绿色随机
var rgbr= 0;
var rgbg= parseInt(Math.random()*255);
var rgbb= 0;
//ctx.fillStyle = "rgb("+r+','+g+','+b+")"

for (var i = 0; i < parseInt(ch/step)/2; i++) {
                        var code = {
                            x : colx, 
                            y : -(step*i)-basePos, 
                            speed : speed, 
//                            text : parseInt(Math.random()*10)%2 == 0 ? 0 : 1  //随机生成0或者1
                            text : ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","s","t","u","v","w","x","y","z"][parseInt(Math.random()*11)], //随机生成字母数组中的一个
color : "rgb("+rgbr+','+rgbg+','+rgbb+")"
                        }
                        col.push(code);  
                    }
                    codeRainArr.push(col);
                }
            }
            //代码雨下起来
            function codeRaining(){
                //把画布擦干净
                ctx.clearRect(0,0,cw,ch);
//创建有颜色的画布
//createColorCv();
                for (var n = 0; n < codeRainArr.length; n++) {
                    //取出列
                    col = codeRainArr[n];
                    //遍历列，画出该列的代码
                    for (var i = 0; i < col.length; i++) {
                        var code = col[i]; 
                        if(code.y > ch){ 
                            //如果超出下边界则重置到顶部
                            code.y = 0;
                        }else{
                            //匀速降落
                            code.y += code.speed;
                        }
                        //颜色也随机变化

//ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)";

//绿色逐渐变浅

//ctx.fillStyle = "hsl(123,30%,"+(30-i*2)+"%)";

//绿色随机
//var r= 0;
//var g= parseInt(Math.random()*255) + 3;
//var b= 0;
//ctx.fillStyle = "rgb("+r+','+g+','+b+")"
ctx.fillStyle = code.color;
                        //把代码画出来
                        ctx.fillText(code.text,code.x,code.y);
                    }
                }
                requestAnimationFrame(codeRaining);
            }

//创建代码雨
            createCodeRain();
            //开始下雨吧 GO>>
            requestAnimationFrame(codeRaining);
        </script>
    </body>
</html>

代码雨 html实现的更多相关文章

  1. Canvas修行之黑客帝国代码雨

    既然是修行,不卖弄关子,不吊胃口,修行成果必须先晒一晒. 下图是我用canvas画的黑客帝国代码雨,想起当年看黑客帝国时,那个代码雨场景让我心旷神怡,大开脑洞,满脑子是那种三维空间,无数0和1像雨一样 ...

  2. theMatrix代码雨效果

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

  3. <前端 js 实现 代码雨 >

    前端  js 实现 代码雨: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. C++代码雨

    闲逛的时候发现了一个很好玩的程序 摘自:https://blog.csdn.net/u012837895/article/details/20849967#comments 效果如下 #include ...

  5. JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <l ...

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

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

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

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

  8. shell窗体实现代码雨（解闷用）

    命令过程 277 2019-11-07 17:14:39 wget https://sourceforge.net/projects/cmatrix/files/cmatrix/1.2a/cmatri ...

  9. cmd中实现代码雨的命令。。。

    颜色修改时不能使用十六进制数 @echo off title digitalrain color 0b setlocal ENABLEDELAYEDEXPANSION for /l %%i in (0 ...

随机推荐

  1. 在Laravel项目中遇到的一些问题

    1. 控制器名字要跟控制器类名保持一致(当保存某个版本的文件时,我通常喜欢复制一份并重命名,这时候重命名的文件的类名并没有改变,着往往回影响结果,却一直找不出错在哪里),在备份的时候应该新建一个文件夹 ...

  2. PowerScript表达式

    运算符 算术运算符 双目运算符 运算符 名称 示例 说明 ^ 乘方 3^2   + 加 i_age+1   - 减 i_age - 1   * 乘 l_w*3   / 除 i_w/3   = 赋值 i ...

  3. java_25 FileReader类和FileWriter类

    1.FileWriter 1.1FileWriter 用于写入字符流.要写入原始字节流,请考虑使用 FileOutputStream. public class Demo { public stati ...

  4. 苹果手机input有圆角阴影的解决方法

    input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearan ...

  5. 通过PHP调用微信JSSDK实例

    JSSDK使用步骤: 1. 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. 2. 采用http GET方式请求获得access_token(有效期7200秒). 3. ...

  6. Servlet中的转发与重定向

    Sevlet 的转发与重定向都可以使得浏览器指向另一个资源文件,但它们的运行机制不相同. 一.Servlet的转发 有两种方式获得转发对象(RequestDispathcer): HttpServle ...

  7. 使用QML绘制界面

    1 使用QML设计登录界面 https://www.cnblogs.com/bhlsheji/p/5324871.html 2 使用QML实现下拉列表框  https://blog.csdn.net/ ...

  8. win10jdk环境变量配置问题：'javac' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

    在编译时报错:'javac' 不是内部或外部命令,也不是可运行的程序 或批处理文件. 原因1:配置Path的时候使用%JAVA_HOME%相对路径配置. 解决:把Path路径改为绝对路径(例:D:\P ...

  9. STC项目风险分析

    一.引言 由于项目的实现具有不确定性,所以每个项目都是存在风险的. 项目实现过程中的复杂性以及项目内外许多变化的因素,都会造成项目实现过程中的风险. 如果不能对项目的风险进行很好的分析和管理,那么项目 ...

  10. Jquery 数组操作大全【转载】

    转载于:https://www.jb51.net/article/43164.htm 1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 ...