以前经常看到文字流特效，今天研究下原理其实很简单。
主要利用H5画布，通过js勾勒渲染，具体步骤详解已在代码里注释出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字雨滴效果</title>
<style type="text/css">
*{padding:0;margin:0}
html{overflow:hidden}
</style>
</head>
<body>
<div id="test"></div>
<br>
<input onclick="operateAnimation(this)" id="operate" type="button" value="暂停" />
<br>
<canvas id="canvas" style="background:#000"></canvas>
<script type="text/javascript">
// window.onload = function(){
//获取画布对象
var canvas = document.getElementById("canvas");
//获取画布的上下文
var context =canvas.getContext("2d");
//获取浏览器屏幕的宽度和高度,这里控制显示的宽度和高度，且涵盖所有浏览器 */
var W = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var H = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
//c.width = 300;
//c.height = 300;
//ctx.fillStyle = "1cba9c";
//ctx.fillRect(0,0,100,100);
//ctx.fillStyle = "ecb69c";
//ctx.fillText("雨滴",10,90);
//设置canvas的宽度和高度
canvas.width = W;
canvas.height = H;
//每个文字的字体大小
var fontSize = 16;
//计算列
var colunms = Math.floor(W /fontSize);
//Math.floor() === 向下取整
//记录每列文字的y轴坐标
var drops = [];
//给每一个文字初始化一个起始点的位置
for(var i=0;i<colunms;i++){
drops.push(0);
}
console.log(drops)
//运动的文字
var str ="显示的运动字体";
//4:fillText(str,x,y);原理就是去更改y的坐标位置
//绘画的函数
function draw(){
//黑BG的帆布
//半透明BG显示轨迹
context.fillStyle = "rgba(0,0,0,0.05)";
context.fillRect(0,0,W,H);
//给字体设置样式
context.font = "700 "+fontSize+"px 微软雅黑";
//给字体添加颜色
context.fillStyle ="#00cc33";//可以rgb,hsl, 标准色，十六进制颜色
////循环字体---写入画布中
for(var i=0;i<colunms;i++){
//随机汉字打印
var index = Math.floor(Math.random() * str.length);
//Math.random()方法可返回介于 0 ~ 1 之间的一个随机数
//index为随机整数
var x = i*fontSize;//x坐标
var y = drops[i] *fontSize;//y坐标
context.fillText(index,x,y);
//如果要改变时间，肯定就是改变每次他的起点
//在屏幕上划线后，把它的顶部随机发送到顶部
//将一个随机性添加到复位中，使分散在轴上的下降
if(y >= canvas.height && Math.random() > 0.99){
drops[i] = 0;
}
//增加的Y坐标
drops[i]++;
}
};
draw();
var intervalId = setInterval(draw,30);
// 测试效果开始/暂停
function operateAnimation(objBtn){
var operate = document.getElementById("operate");
if(objBtn.value == "开始"){
objBtn.value = "暂停";
intervalId = setInterval(draw,30);
}else{
objBtn.value = "开始";
clearInterval(intervalId);
}
return false;
}
// };
</script>
</body>
</html>
拓展：
（一）获取浏览器屏幕的宽度和高度
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
所以这里我为了涵盖所有浏览器，将获取方法均列出来
（二）setInterval（翻译为set设置Interval间隔）
setIntervalsetInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",1000)
function clock()
{
var t=new Date()
document.getElementById("clock").value=t
}
</script>
<button onclick="int=window.clearInterval(int)">Stop interval</button>
【与setTimeout的使用区别】
这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。
(方 法):
实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。
不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。
（3）Math.floor() === 向下取整
（4）Math.random()方法可返回介于 0 ~ 1 之间的一个随机数
（5）clearInterval（翻译为清除clear间隔interval）
①clearInterval()：取消由 setInterval() 设置的 timeout
②setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 该方法返回的 ID 值可用作 clearInterval() 方法的参数。
.