本文主要详细介绍JS实现代码rain的效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享JS实现代码雨效果的具体代码，供大家参考。具体内容如下
Html代码
画布id=' code _ rain _ canvas ' width=' 1440 ' height=' 900 '/canvas
javascript，javascript
window.onload=function() {
//获取画布对象
var canvas=document . getelementbyid(' code _ rain _ canvas ')；
//获取画布的上下文
var context=canvas . get context(' 2d ')；
var s=window.screen
var W=canvas . width=s . width；
var H=canvas.height
//获取浏览器屏幕的宽度和高度
//var W=window . inner width；
//var H=window . inner height；
//设置画布的宽度和高度
canvas . width=W；
canvas . height=H；
//每个文本的字体大小
var fontSize=12
//计算列
var columns=math . floor(W/font size)；
//记录每列文本的Y轴坐标
var drops=[]；
//初始化每个文本的起点位置
for(var I=0；I列；i ) {
drops . push(0)；
}
//动人的文字
欢迎来到WWW。itr hx . COM '；
//4:fillText(str，x，y)；原理是改变y的坐标位置。
//绘画的功能
函数draw() {
context.fillStyle='rgba(238，238，238， 08)'；//覆盖层
context.fillRect(0，0，W，H)；
//设置字体样式
context . font=' 600 ' font size ' px Georgia '；
//给字体添加颜色
context.fillStyle=['#33B5E5 '，' #0099CC '，' #AA66CC '，' #9933CC '，' #99CC00 '，' #669900 '，' #FFBB33 '，' #FF8800 '，' #FF4444 '，' # cc 0000 '][parse int(math . random()* 10)]；//rand color()；是的，rgb，hsl，标准色和十六进制色。
//写入画布
for(var I=0；I列；i ) {
var index=math . floor(math . random()* str . length)；
var x=i * fontSize
var y=drops[I]* font size；
context.fillText(str[index]，x，y)；
//如果要换时间，那肯定是每次都要换他的起点。
if(y=canvas . height math . random()0.99){
drops[I]=0；
}
drops[I]；
}
};
函数color(){//随机颜色
var r=math . floor(math . random()* 256)；
var g=math . floor(math . random()* 256)；
var b=math . floor(math . random()* 256)；
返回“rgb(' r '，' g '，' b ')”；
}
draw()；
setInterval(draw，35)；
};
显示效果：
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。