前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[网页源码]炫酷的数字雨网页源码分享

[网页源码]炫酷的数字雨网页源码分享

作者头像
Youngxj
发布2018-06-07 15:06:19
3K0
发布2018-06-07 15:06:19
举报
文章被收录于专栏:Youngxj

黑客帝国相关的相关数字雨源码。可以拿来装逼以及做黑页。

演示地址:http://www.youngxj.cn/szy.html

323.png
323.png

源码附下:

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <!--版权:Young小杰   www.youngxj.cn
            学习所写
        -->
        <meta charset="UTF-8">
        <title>小杰黑页</title>
</head>
    <body>
        <canvas id="c"></canvas>
        <script>
            var c=document.getElementById("c");
            var ctx=c.getContext("2d");
                c.width=window.innerWidth;
                c.height=window.innerHeight;
//              ctx.fillRect(0,0,100,100);
//              a,b,c,d分别代表x方向偏移,y方向偏移,宽,高
            var string1 = "abcdefghijklmnopqrstuvwxyz";
                string1.split("");
            var fontsize=20;
                columns=c.width/fontsize;
            var drop = [];
            for(var x=0;x<columns;x++)
            {
                drop[x]=0;
            }
        function drap(){
            ctx.fillStyle="rgba(0,0,0,0.07)";
            ctx.fillRect(0,0,c.width,c.height);
            ctx.fillStyle="#0F0";
            ctx.font=fontsize+"px arial";
            for(var i=0;i<drop.length;i++){
                var text1=string1[Math.floor(Math.random()*string1.length)];
                ctx.fillText(text1,i*fontsize,drop[i]*fontsize);
                drop[i]++;
                if(drop[i]*fontsize>c.height&&Math.random()>0.9){//90%的几率掉落
                    drop[i]=0;
                }
            }
        }
        setInterval(drap,20);
        </script>
    </body>
</html>

数字雨

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-10-29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档