之前在其他地方看到了一个瀑布文字，突然有兴趣也模仿了一个，分享给大家
1 <body style="background: #000;">2 ????????<canvas id="c"></canvas>3 ????????4 ????</body>
<script> ???????var c = document.getElementById("c"); ???????var ctx = c.getContext("2d"); ???????//制作全屏 ???c.height = window.innerHeight; ???c.width = window.innerWidth; ???????//汉字从Unicode字符集 ???var chinese = "岁月太短、一吻天荒.."; ???//将字符串转换为一个数组中的单个字符 ???chinese = chinese.split(""); ???????var font_size = 20; ???var columns = c.width/font_size; //雨的列数 ???//每列的一个数组 ???var drops = []; ???//下面是×坐标 ???//1 = y 在下降（最初是相同的） ???for(var x = 0; x < columns; x++) ???????drops[x] = 1; ????????//画 ???function draw() ???{ ??????????//黑BG的帆布 ???????//半透明BG显示轨迹 ???????ctx.fillStyle = "rgba(0, 0, 0, 0.07)"; ???????ctx.fillRect(0, 0, c.width, c.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)]; ???????????//x = i*font_size, y = value of drops[i]*font_size ???????????ctx.fillText(text, i*font_size, drops[i]*font_size); ???????????????????????//在屏幕上划线后，把它的顶部随机发送到顶部 ???????????//将一个随机性添加到复位中，使分散在轴上的下降 ???????????if(drops[i]*font_size > c.height && Math.random() > 0.975) ???????????????drops[i] = 0; ???????????????????????//增加的Y坐标 ???????????drops[i]++; ???????} ???} ???????setInterval(draw, 30); ???????????????????</script>jquery实现瀑布文字
原文地址：http://www.cnblogs.com/shengzi/p/7610392.html