jquery實現瀑布文字
阿新 • • 發佈：2017-09-29
ext context color floor mat rect ops 半透明 打印
之前在其他地方看到了一個瀑布文字，突然有興趣也模仿了一個，分享給大家
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(vari = 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實現瀑布文字