給大家分享一個使用HTML5 canvas 形成的瀑布流文字效果，非常酷炫！相關代碼如下：

 !doctype html  html lang= en  head  meta charset= UTF-8  title cloth /title  style  padding: 0; margin: 0;body{ background:#000; /style  /head  body  p id= container  canvas id= c /canvas  script type= text/javascript src= http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js /script  script  var c = document.getElementById( c var ctx = c.getContext( 2d //制作全屏c.height = window.innerHeight;c.width = window.innerWidth;//漢字從Unicode字符集var chinese = igeekbar~ //將字符串轉換為一個數組中的單個字符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.05)  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, 33); /script  /body  /html 

相關推薦：

超簡單的瀑布流布局實現方法

jQuery簡單實現圖片瀑布流

純原生JS的瀑布流插件Macy.js使用詳解

以上就是HTML5 canvas實現瀑布流文字效果代碼的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。