炫酷的代码雨源码

062334

代码雨样式一

效果预览

源代码：

<!DOCTYPE html>
<!--Mx博客www.imxbk.com-->
<html>

<head>   
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Code</title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }
        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 = 16;    //步长，每一列内部数字之间的上下间隔
    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;
                }
                
                //1 颜色也随机变化
                //ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)"; 
 
                //2 绿色逐渐变浅
                // ctx.fillStyle = "hsl(123,80%,"+(30-i*2)+"%)"; 
 
                //3 绿色随机
                // var r= 0;
                // var g= parseInt(Math.random()*255) + 3;
                // var b= 0;
                // ctx.fillStyle = "rgb("+r+','+g+','+b+")";
 
                //4 一致绿
                ctx.fillStyle = code.color;
 
 
                //把代码画出来
                ctx.fillText(code.text, code.x, code.y);
            }
        }
        requestAnimationFrame(codeRaining);
    }
 
    //创建代码雨
    createCodeRain();
    //开始下雨吧 GO>>
    requestAnimationFrame(codeRaining);
</script>

</body>
<!--Mx博客www.imxbk.com-->
</html>

代码雨样式二

效果预览

源代码：

<!DOCTYPE html>
<!--Mx博客www.imxbk.com-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Code</title>
    <style>
        body{
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
<canvas id="myCanvas"></canvas>
<script>
    const width = document.getElementById("myCanvas").width = screen.availWidth;
    const height = document.getElementById("myCanvas").height = screen.availHeight;
    const ctx = document.getElementById("myCanvas").getContext("2d");
    const arr = Array(Math.ceil(width / 10)).fill(0);
    const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");

function rain() {
    ctx.fillStyle = "rgba(0,0,0,0.05)";
    ctx.fillRect(0, 0, width, height);
    ctx.fillStyle = "#0f0";
    arr.forEach(function (value, index) {
        ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);
        arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;
    });
}

setInterval(rain, 30);
</script>

</body>
<!--Mx博客www.imxbk.com-->
</html>

代码雨样式三

效果预览

源代码：

<html><head></head><body><canvas id="canvas" style="background:black" width="2560" height="1283"></canvas>
<title>Code</title>
<!--Mx博客www.imxbk.com-->
<style type="text/css">

body{margin: 0; padding: 0; overflow: hidden;}

</style>

<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 = 15;

//计算列

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

//记录每列文字的y轴坐标

var drops = [];

//给每一个文字初始化一个起始点的位置

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

drops.push(0);

}

//运动的文字

var str ="01abcdefghijklmnopqurstuvwxyz";

//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.font = fontSize + 'px arial';

//给字体添加颜色

context.fillStyle ="green";//随意更改字体颜色

//写入图形中

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.92){

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,33);

};

</script>

<!--Mx博客www.imxbk.com--></body></html>

代码雨样式四

效果预览

源代码：

<!DOCTYPE
<!--Mx博客www.imxbk.com-->
<html 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>代码雨</title>
<style>
    body{
        overflow: hidden;
        margin: 0;
    }    
</style>
</head>
<body>
<canvas id="q" width="2560" height="1440"></canvas>
<script type="text/javascript">
    var s=window.screen;var width=q.width=s.width;
    var height=q.height=s.height;
    var letters=Array(256).join(1).split('');
    var draw=function(){q.getContext('2d').fillStyle='rgba(0,0,0,.05)';q.getContext('2d').fillRect(0,0,width,height);q.getContext('2d').fillStyle='#0F0';
    letters.map(function(y_pos,index){text=String.fromCharCode(34+Math.random()*33);x_pos=index*10;q.getContext('2d').fillText(text,x_pos,y_pos);
    letters[index]=(y_pos>758+Math.random()*1e4)?0:y_pos+10;q.getContext('2d').fillStyle='#'+letters[index];});};setInterval(draw,33);
</script>
</body>
<!--Mx博客www.imxbk.com-->
</html>

源码打包下载

  此处内容已隐藏，请评论后刷新页面查看.
© 版权声明
相关声明 1 本站名称：铭心博客
2 本站永久网址：https://www.imxbk.com/
3 本文内容仅为技术科普，请勿用于非法用途。
4本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 根据《计算机软件保护条例》第十七条，本站所有软件请仅用于学习研究用途。
6 本文内容未隐讳任何个人、群体、公司。非文学作品，请勿用于阅读理解的练习。
7 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
THE END
资源分享精品源码
# 资源分享# 网站源码
喜欢就支持一下吧！
点赞334 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容

1华为交换机文件系统介绍

2Ubuntu升级或安装最新版本的Nginx

3Fuxploider工具

4Python打包.exe可执行文件

5跨站脚本攻击(Payload)

6Linux 系统自动化部署系统

随机文章
qlhl的头像-铭心博客

qlhl5天前0

感谢分享表情[keai]-铭心博客
dl2002的头像-铭心博客SVIP会员

dl20022个月前0

来评论一下
dl2002的头像-铭心博客SVIP会员

dl20022个月前0

写的太好了
标签云
教程分享eNSP华为资源分享网络安全华为模拟器Linux渗透测试环境搭建windowsKali LinuxPythonC信息收集编程GITHUB开源开源项目centos开源推荐搭建环境信息安全网站源码工具推荐开源程序操作系统服务器系统BlogUbuntu系统安全HTMLLinux 服务器MYSQLPhotoshopUbuntu数据库暴力破解源码路由器软件推荐NGINXshellSSH数据安全数据泄露服务器运维漏洞复现脚本IPPHPPSVMwareWEBWin11WordPress音乐播放器源码DDOSIOSJavaScriptMacnmap个人隐私代码免费软件加密图像处理密码学开源源码悬浮音乐播放器源码下载漏洞扫描电脑日常使用问题网络攻击虚拟机软件软件分享隐私安全音乐播放器Adobe Photoshop