知识网经验知识百科全书!
登录
登录
主页 > 游戏数码 > 电脑 > 抖音爆火的 黑客帝国,代码雨

抖音爆火的 黑客帝国,代码雨优质

106次浏览 | 2020-03-20 21:17 更新
来源 :互联网
最佳经验
抖音爆火的 黑客帝国,代码雨 本文由作者推荐

操作方法

  • 01

    在桌面新建一个文件夹,命名为黑客帝国代码雨。

  • 02

    在文件夹内新建一个文本文档。

  • 03

    将新建文本文档命名为代码雨。

  • 04

    将以下代码复制到文本中:
    <canvas id="canvas" style="background:black" width="620" height="340"></canvas>
    <audio style="display:none; height: 0" id="bg-music" preload="auto" src="music/黑客帝国.mp3"></audio>
    <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>

  • 05

    直接复制代码,后缀名改为:.html ,直接运行就可以看到效果啦!

  •  

标签:

y客帝国
收到0个赞
笔记本处理器性能排行榜
笔记本处理器质量的好坏,一定程度上决
aux接口怎么用
有的朋友不知道aux接口怎么用?可是放的
电脑平方米符号 平方的小2怎么打出来
电脑平方米符号怎么打出来 平方的小2怎
抖音爆火的 黑客帝国,代码雨
在桌面新建一个文件夹,命名为黑客帝国
电脑开机出现 今日热点 新闻弹窗,怎么去除
现在很多软件中都会附带一些弹窗新闻软
简单查看电脑屏幕尺寸、配置
在日常生活中,电脑是我们大家都需要用
如何取消QQ烦人的自动回复?
在电脑上登录需要取消自动回复消息的
win10系统如何使开机破8秒,开机变慢为快
win10开机不是那么快,甚至有时候会出现
用PS制作室内设计彩色平面图的方法
很多小伙伴不知道,用PS制作室内设计彩
如何在Word中输入平均数的符号X上加一横(X拔)
word是一款非常实用的办公软件,我们经常
关于我们 | 版权声明 | 免责声明 | 联系我们
免责声明:知识网所有文字、图片、视频、音频等资料均来自互联网,不代表本站赞同其观点,内容仅代表作者本人意见,若因此产生任何纠纷作者本人负责,本站亦不为其版权负责! 如有问题,请联系我们
CopyRight©1999-2019 www.44jj.com All Right Reserved 豫ICP备16009659号