网页|黑客帝国字符雨
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 团队
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-05-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
