标签：文字 字体 etc [] tco width random col ack
之前在其他地方看到了一个瀑布文字，突然有兴趣也模仿了一个，分享给大家
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>
标签：文字 字体 etc [] tco width random col ack
原文地址：http://www.cnblogs.com/shengzi/p/7610392.html
