HTML5 canvas 瀑布流文字效果的示例代码


Posted in HTML / CSS onJanuary 31, 2018

今天,小编将与大家分享web前端特效荟萃系列第十三期,喜欢把玩儿炫酷效果的小伙伴快快看过来^_^ ,希望大家喜欢呦~

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>
  <div id="container">
 <canvas id="c"></canvas>
</div>
<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
css3的focus-within选择器的使用
May 11 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 #HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 #HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 #HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 #HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 #HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 #HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 #HTML / CSS
You might like
坏狼的PHP学习教程之第1天
2008/06/15 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
Python入门_条件控制(详解)
2017/05/16 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
scrapy爬虫完整实例
2018/01/25 Python
python list转矩阵的实例讲解
2018/08/04 Python
python中map的基本用法示例
2018/09/10 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
心得体会范文
2014/01/04 职场文书
工程售后服务承诺书
2014/05/21 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
乐山大佛导游词
2015/02/02 职场文书
小班上学期个人总结
2015/02/12 职场文书
公司地址变更通知
2015/04/25 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
毕业酒会致辞
2015/07/29 职场文书