css瀑布流布局代码,html图片瀑布流

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

　　给大家分享一个使用HTML5画布形成的瀑布流文字效果，非常酷炫！相关代码如下：

　　！doctype html html lang= en head meta charset= UTF-8 title cloth/title style * { padding:0；边距：0;}正文{背景：# 000;}/style/head body div id=容器 canvas id= c /canvas/div script type= text/JavaScript src= http://cdn。GB标签。com/jquery/1。11 .1/jquery。量滴js /script脚本变量c=document。getelementbyid( c )；var CTX=c .获取上下文( 2d )；//制作全屏c .高度=窗户。内部高度；宽度=窗户。内部宽度；//汉字从统一码字符集var chinese= igeekbar ~//将字符串转换为一个数组中的单个字符中文=中文。拆分()；var font _ size=20 var columns=c.width/font_size;//雨的列数//每列的一个数组var drops=[]；//下面是坐标//1=y在下降（最初是相同的)for(var x=0；x列；x)drops[x]=1；//画函数draw(){ //黑保加利亚的帆布//半透明保加利亚显示轨迹ctx.fillStyle=rgba(0，0，0，0.05)；ctx.fillRect(0，0，c.width，c . height)；CTX。填充样式= # 0f 0//字体颜色ctx.font=font _ size px arial//循环字体for(var I=0；我下降。长度；i ) { //随机汉字打印var text=中文[数学。地板(数学。random()*中文。长度)]；//x=i*font_size，y=drops[i]*font_size CTX。填充文本(text，i*font_size，drops[I]* font _ size)的值；//在屏幕上划线后，把它的顶部随机发送到顶部//将一个随机性添加到复位中，使分散在轴上的下降if(drops[I]* font _ size c .高度数学。random()0.975)drops[I]=0；//增加的Y坐标drops[I]；}}setInterval(绘制，33);/script/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。