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

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

扣丁学堂HTML5

​

  

  cloth

  

    *{

  padding: 0;

  margin: 0;

}

body{

 background:#000;

}   

  

 

    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);

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