HTML5 canvas实现瀑布流文字效果代码_html5

上一篇: HTML5 WebSocket点对点聊天实现方... 下一篇:HTML5仿微信聊天界面和朋友圈代码

HTML5 canvas实现瀑布流文字效果代码

发布时间：2022-05-17 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了HTML5 canvas实现瀑布流文字效果代码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

本文主要和大家介绍HTML5 canvas 瀑布流文字效果的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

HTML5 canvas实现瀑布流文字效果代码

给大家分享一个使用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>
</p>
<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>

脚本宝典总结

以上是脚本宝典为你收集整理的HTML5 canvas实现瀑布流文字效果代码全部内容，希望文章能够帮你解决HTML5 canvas实现瀑布流文字效果代码所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：canvas canvas

上一篇: HTML5 WebSocket点对点聊天实现方... 下一篇:HTML5仿微信聊天界面和朋友圈代码

猜你在找的html5相关文章

关于移动端h5开发相关内容总结 2022-05-17
html5教程-学表单的第二天 2018-12-10
html5教程-HTML5浏览器支持 2018-12-10
html5教程-HTML5智能表单 2018-12-10
html5教程-微信H5使用resLoader实现加载页效果 2018-12-10
html5教程-day01-初级-JS0-热身运动、JS入门教程 2018-12-10
html5教程-html5shiv.js和respond.min.js 2018-12-10
html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性 2018-12-10
html5教程-使用Html5实现手风琴案例 2018-12-10
html5教程-html5笔记 2018-12-10