本文主要详细介绍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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。