专栏首页算法与编程之美网页|黑客帝国字符雨

网页|黑客帝国字符雨

1 引言

相信看过黑客帝国的人都对其开头的字符雨印象深刻,但它到底是怎么实现如此炫酷的效果呢?接下来我们就来详细讲一讲如何制作字符雨。

2 方法

(1)新建记事本

(2)写入代码:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{margin: 0; padding: 0; overflow:  hidden;}
</style>
</head>
<body>
<canvas id="canvas"  style="background:black" width="620"  height="340"></canvas>
<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.width  = W;
              canvas.height  = H;
              var  fontSize = 15;
              var  colunms = Math.floor(W /fontSize);  
              var  drops = [];
              for(var  i=0;i<colunms;i++){
                     drops.push(0);
              }

              var  str ="01abcdefghijklmnopqurstuvwxyz";

              function  draw(){

                     context.fillStyle  = "rgba(0,0,0,0.05)";

                     context.fillRect(0,0,W,H);

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

       };

</script>
</body>
</html>

(3)将文件后缀修改为html,并点击运行。

图1 实现效果

3 代码讲解

1)定义图像容器大小背景

<canvas> 标签定义图形,比如图表和其他图像。因为这个标签只是图形容器,所以必须使用脚本来绘制图形

<canvas  id="canvas" style="background:black"  width="620" height="340"></canvas>

在这里定义了一个宽为620,高为340的背景色为黑色的图像容器。

2)设置脚本代码,实现字符雨

创建函数,写入window.onload() 方法,使网页在加载完毕后立刻执行执行脚本代码的操作;

window.onload = function(){}

利用var设置变量值,获取图形对象和上下文;

var canvas =  document.getElementById("canvas");var context =  canvas.getContext("2d");

利用变量获取浏览器高度和宽度,并将值赋给canvas;

var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;

利用floor() 方法(Math.floor()返回小于或等于一个给定数字的最大整数)计算列;

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

记录每列文字的y轴坐标,并给每一个文字初始化一个起始点的位置;

var drops = [];
for(var i=0;
i<colunms;
i++){       drops.push(0);
}

设置一些字符;

var str  ="01abcdefghijklmnopqurstuvwxyz";

创建draw()函数实现文字运动;

function draw(){}

设置背景和字体的样式;

//让背景逐渐由透明到不透明
context.fillStyle =  "rgba(0,0,0,0.05)";
context.fillRect(0,0,W,H);
//给字体设置样式                    
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+")";
              }

利用setInterval()方法(按照指定的周期(以毫秒计)来调用函数或计算表达式,setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭)来调用函数,在这里设置的数值越小调用的draw()函数就越频繁,字符变化也就越快。

setInterval(draw,30);

END

编 辑 | 王楠岚

责 编 | 杨金月

where2go 团队

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:杨金月

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • node+express使用multiparty实现文件上传

    文件上传在一个项目中是相对于比较基础的功能,今天分享一下自己是如何在nodejs中使用中间件multiparty实现文件上传的。nodejs环境的搭建就不赘述了...

    算法与编程之美
  • 开发|走进小程序(二)

    之前的博客《走进小程序》介绍了制作小程序的准备步骤和一些技术知识,这次我们从实际制作入手,边做边学。

    算法与编程之美
  • 微信小程序|实现界面滑动切换

    在许多用户体验效果较好的微信小程序中,用户通过左右滑动界面也能实现页面的切换,方便了用户使用,那它们是如何实现的呢?

    算法与编程之美
  • 文史上最骚的编程语言来了!大四学生发明言文编程语言!秀的我头皮发麻

    到底是什么神仙项目,竟然获得如此高的评价?原来,这是一位卡内基梅隆大学(CMU)的大四学生开发的基于文言文的编程语言。

    Guide哥
  • javascript模式 读书笔记一

    模式是指一个通用问题的解决方案。 模式分三种 设计模式 编码模式:javascript特有的

    lilugirl
  • proxy in nodejs code

    I train myslef with NodeJS and tried a simple GET call. Here is my code:

    Jerry Wang
  • 关于ajax学习笔记

    只要这个属性值发生了变化,就会触发一个事件onreadystatechange事件,就可以使用xhr.onreadystatechange = function...

    前端正义联盟
  • JS判断当前设备是 PC IOS Andriod

    江湖前辈黄药师
  • <sub>标签

    The coordinate of the ith point is (xi, yi). For example, the 10th point has co...

    Html5知典
  • 黑客帝国中代码雨如何实现?用 canvas 轻松实现代码雨炫酷效果!

    演示地址:https://www.albertyy.com/2020/7/codeRain.html

    AlbertYang

扫码关注云+社区

领取腾讯云代金券