html特效代码雨代码,js 特效代码

html特效代码雨代码,js 特效代码,JS实现代码雨特效

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

留言与评论(共有 条评论)
   
验证码: