HTML5Canvas瀑布文字效果示例代码分享文中分享了HTML5Canvas瀑布文字效果示例代码。让我们来看看。Cloth*{padding:0;margin:0;}body{background:#000;}varc=document.getElementById("c");varctx=c.getContext("2d");//制作全屏c.height=window.innerHeight;c.width=window.innerWidth;//来自Unicode字符集的汉字varchinese="igeekbar~";//将字符串转换为数组中的单个字符chinese=chinese.split("");varfont_size=20;varcolumns=c.width/font_size;//雨的列数//每列一个数组vardrops=[];//下面是x坐标//1=y正在下降（最初是相同的）for（varx=0;xdrops[x]=1;//绘图函数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+"pxarial";//循环字体for(vari=0;i{//随机汉字打印vartext=chinese[Math.floor(Math.random()*chinese.length)];//x=ifont_size,y=drops[i]font_sizeectx.fillText(text,ifont_size,drops[i]font_size);//在屏幕上画完线后，将其顶部随机发送到顶部//给reset增加一个随机性，让轴上的散点下降if(drops[i]*font_size>c.height&&Math.random()>0.975)drops[i]=0;//增加Y坐标drops[i]++;}}setInterval(draw,33);加粗字体
