canvas程序,canvas案例

　　使用画布的矩阵数字雨

　　效果图：

　　代码：

　　！DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，initial-scale=1.0 meta http-equiv= X-UA-Compatible content= ie=edge title document/title style body { margin:0；填充：0；}画布{宽度：100%；身高：100%；}/style/headbdy canvas style= background:# 111 /canvas script//Get canvas object varcan=document . query selector( canvas )；//获取canvas var CTX=can . Get context( 2d )的上下文；//设置画布的宽度和高度can . width=window . inner width；can . height=window . inner height；//每个文本的字体大小var fontSize=16//Calculate column ms=math . floor(window . inner width/font size)；//记录文本var arr=[]每一列的Y轴坐标；//将每个文本的起点位置初始化为(var I=0；I列；I){ arr . push(0)；}//动文字var str=你个傻逼；//drawn function函数draw() {//全屏黑色蒙版图层ctx.fillStyle=rgba(0，0，0，0.05)；ctx.fillRect(0，0，window.innerWidth，window . inner height)；//设置字体样式CTX . font= 700 font size px Microsoft Yahei ；//将color ctx.fillStyle=#00cc33 添加到字体中；//写入画布for(var I=0；I列；I){ var index=math . floor(math . random()* str . length)；var x=i * fontSizevar y=arr[I]* font size；ctx.fillText(str[index]，x，y)；//如果文本的Y轴坐标大于画布的高度，1/100 * columns probability将文本的Y轴坐标重置为0 If(Y=can . height math . random()0.99){ arr[I]=0；}//text Y轴坐标1 arr[I]；} } draw()；setInterval(draw，30)；/脚本/正文/html总结

　　以上是边肖介绍的矩阵的数字雨效果。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！

　　如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！

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