HTML5视频教程之canvas瀑布流文字效果的示例代码分享
加入技术交流群
本篇文章扣丁学堂HTML5在线学习小编主要是和大家分享HTML5 canvas 瀑布流文字效果的示例代码，喜欢炫酷效果的小伙伴可以学习一下。文章中分享了HTML5 canvas 瀑布流文字效果的示例代码，现在很小编一块来看一下吧。
<!doctype html> <html> <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>以上就是小编给大家分享的HTML5 canvas 瀑布流文字效果的示例代码，想要了解更多内容的小伙伴可以登录扣丁学堂官网查看更多内容。扣丁学堂是专业的HTML5培训机构，不仅有专业的老师和与时俱进的课程体系，还有大量的HTML5在线视频供学员观看学习哦。扣丁学堂H5技术交流群：692172929。
本篇文章扣丁学堂HTML5在线学习小编主要是和大家分享HTML5 canvas 瀑布流文字效果的示例代码，喜欢炫酷效果的小伙伴可以学习一下。文章中分享了HTML5 canvas 瀑布流文字效果的示例代码，现在很小编一块来看一下吧。
<!doctype html> <html> <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>以上就是小编给大家分享的HTML5 canvas 瀑布流文字效果的示例代码，想要了解更多内容的小伙伴可以登录扣丁学堂官网查看更多内容。扣丁学堂是专业的HTML5培训机构，不仅有专业的老师和与时俱进的课程体系，还有大量的HTML5在线视频供学员观看学习哦。扣丁学堂H5技术交流群：692172929。微信号：codingbb
专栏文章内容及配图由作者撰写发布，仅供工程师学习之用，如有侵权或者其他违规问题，请联系本站处理。 联系我们
关键词：
相关推荐
ARM是不是不能定义结构体？（UCOSII)
三安与意法半导体重庆8英寸碳化硅晶圆合资厂正式通线
《嵌入式系统设计》14-软硬件协同设计技术(软硬件协同设计内容到划分)及软硬件系统划分技术(开始到系统划分)
桥水基金创始人：这辈子美国都别想赢过中国制造业
离婚[ZZ]
罗姆的EcoGaN™被村田制作所Murata Power Solutions的AI服务器电源采用
《嵌入式系统设计》14-1-划分及作业布置
《嵌入式系统设计》17-嵌入式系统设计U-BOOT(跳转到stage2的C入口点到嵌入式系统Bootloader)
由单电源供电的精密双电流源电路图(XTR101)
XTR101热电偶输入电路图
纽约第五大道647号——一个绮丽的梦境
XTR101电桥输入、电压激励电路图
驾驭瞬息万变的时代：电信行业的新视角
《嵌入式系统设计》13-软硬件协同设计(开始到典型的协同设计流程)
《嵌入式系统设计》15-嵌入式系统设计U-BOOT(Bootloader的一些介绍)
XTR101电桥输入、电流激励电路图
ARM是不是不能定义结构体？（UCOSII)
Silabs公司c8051f040DK原理图
一个交叉编译的问题
TCL科技拟收购深圳华星半导体21.53%股权
是德科技与爱立信强强联合，搭建基于厘米波频段的Pre-6G 测试平台
Ceva推出最新高性能、高效率通信DSP，面向先进5G和6G应用
英飞凌成为全球首个在安全控制器中采用后量子加密算法而获得Common Criteria认证的公司
Silabs公司c8051f320DK原理图
SMD焊接指南
SMT环境中的最新复杂技术
单结晶体管（UJT）
XTR101 0～20mA输出变换电路图
SI经典数字信号完整性和建模
芯片巨头，盯上EUV