所用到的知识点
1.canvas
<canvas> 标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
<canvas> 标签只是图形容器，必须使用脚本来绘制图形。
2.window尺寸
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于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
3.填充方法：
fillStyle：设置或返回用于填充绘画的颜色、渐变或模式。
fillRect：绘制”被填充”的矩形。
fillText：在画布上绘制”被填充的”文本。
4.Math数学函数
floor(x)：对 x 进行下舍入。
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 该方法返回的 ID 值可用作 clearInterval() 方法的参数。
clearInterval()：取消由 setInterval() 设置的 timeout。Markup
<html>
<head>
<title>Digital Rain</title>
<meta charset="UTF-8">
<style> * {margin: 0; padding: 0;} body {background: #fff;} canvas {display: block;}</style>
</head>
<body>
<canvas id="ad" height="100%" width="100%"></canvas>
<script>
var ad = document.getElementById("ad");
var ctx = ad.getContext("2d");
ad.height = window.innerHeight;
ad.width = window.innerWidth;
var chinese = "www.lvxiazi.cn"; //可以修改下落文字
chinese = chinese.split("");
var font_size = 12; //可以修改文字大小
var columns = ad.width / font_size;
var drops = []; for (var x = 0; x < columns; x++) drops[x] = 1;
function draw() {
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, ad.width, ad.height);
ctx.fillStyle = "#0F0";//可以修改文字颜色
ctx.font = font_size + "px arial";
for (var i = 0; i < drops.length; i++) {
var text = chinese[Math.floor(Math.random() * chinese.length)];
ctx.fillText(text, i * font_size, drops[i] * font_size);
if (drops[i] * font_size > ad.height && Math.random() > 0.975) drops[i] = 0;
drops[i]++; } }
setInterval(draw, 30);
</script>
</body>
</html>
声明：本文系互联网搜索而收集整理，不以盈利性为目的，文字、图文资料源于互联网且共享于互联网。
如有侵权，请联系 yao4fvip#qq.com （#改@） 删除。
如有侵权，请联系 yao4fvip#qq.com （#改@） 删除。
