用HTML制作代码雨源码分享

最新推荐文章于 2024-06-11 09:45:28 发布

真爱计划

最新推荐文章于 2024-06-11 09:45:28 发布

阅读量2.4k

点赞数 4

分类专栏：杂文文章标签： html javascript css

本文链接：https://blog.csdn.net/weixin_64612659/article/details/122516030

版权

杂文专栏收录该内容

47 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
 <html>
     <head>
         <meta charset="utf-8" />
         <title>代码雨</title>
 
         <!-- CSS样式 -->
         <style type="text/css">
            * {margin: 0; padding: 0;} //无边距
             body {background: black;}
             canvas {display: block;}
</style>
     </head>
 
     <body>
         <canvas id="c"></canvas>    <!-- 定义画布 -->
         <script type="text/javascript">
             var c = document.getElementById("c");  //拿到画布并赋值给c
             var ctx = c.getContext("2d");     //创建画笔,2d的
 
             c.height = window.innerHeight;  //获取屏幕分辨率:高
             c.width = window.innerWidth;    //宽
             var chinese = "01";
             chinese = chinese.split("");   //split() 方法用于把一个字符串分割成字符串数组。
 
             var font_size = 10;   //字体大小
             var columns = Math.floor(c.width/font_size);  //屏幕大小除以字体大小=字体个数;向下取整
             //an array of drops - one per column
             var drops = [];  //创建一个数组
             for(var x = 0; x < columns; x++)
             drops[x] = 1;
             //drawing the characters
             function draw()
{
             ctx.fillStyle = "rgba(0, 0, 0, 0.05)";//rgba:基础三色加不透明度
             ctx.fillRect(0, 0, c.width, c.height);
 
             ctx.fillStyle = "#0F0"; //green text
             ctx.font = font_size + "px arial";
             //looping over drops
             for(var i = 0; i < drops.length; i++)
            {
             var text = chinese[Math.floor(Math.random()*chinese.length)];
             ctx.fillText(text, i*font_size, drops[i]*font_size);
 
             //越接近一表示一起下落的可能性越低
             if(drops[i]*font_size > c.height && Math.random() > 0.975)
                     drops[i] = 0;
                     drops[i]++;
            }
            }
             setInterval(draw, 33);//时间间隔
</script>
 </body>
 </html>

效果如下：