扣丁学堂HTML5 canvas 瀑布流文字效果的示例代码

本篇文章扣丁学堂HTML5在线学习小编主要是和大家分享HTML5 canvas 瀑布流文字效果的示例代码，喜欢炫酷效果的小伙伴可以学习一下。文章中分享了HTML5 canvas 瀑布流文字效果的示例代码，现在很小编一块来看一下吧。

HTML5培训

&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;cloth&lt;/title&gt;
 &lt;style&gt;
 *{
 padding: 0;
 margin: 0;
}
body{
 background:#000;
} 
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div id="container"&gt;
 &lt;canvas id="c"&gt;&lt;/canvas&gt;
&lt;/div&gt;
&lt;script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
 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 &lt; 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 &lt; 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 &gt; c.height &amp;&amp; Math.random() &gt; 0.975)
 drops[i] = 0;
 
 //增加的Y坐标
 drops[i]++;
 }
}
setInterval(draw, 33);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

以上就是小编给大家分享的HTML5 canvas 瀑布流文字效果的示例代码，想要了解更多内容的小伙伴可以登录扣丁学堂官网查看更多内容。扣丁学堂是专业的HTML5培训机构，不仅有专业的老师和与时俱进的课程体系，还有大量的HTML5在线视频供学员观看学习哦。

扣丁学堂HTML5 canvas 瀑布流文字效果的示例代码

相关推荐