本文主要详细介绍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)；

};

显示效果：

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。