一直都想写一个下雨的效果，可是无论是时间上，还是从自身来说，都本能的去躲避，没有太多正面面对的勇气，即使这个效果也不难实现。看来，在修炼的历程上，还需要更进一步加强才行。由于采用的是很简单的方法，代码也没几行，思路实现了下，代码主要话，主要是采用的canvas不停随机绘制，形成不断下雨的视觉效果：
(function(){
var canvas = document.getelementbyid_x('canvas');
var ctx = canvas.getcontext('2d');
var w = document.documentelement.offsetwidth;
var h = document.documentelement.offsetheight;
var x = 0, y = 0,len = 200,angle = -2,count = 100;
var raintimer = null,drawtimer = null;
//线条颜色
var color = ctx.createlineargradient(0,0,0,len);
color.addcolorstop(0,'purple');
color.addcolorstop(1,'rgba(255,255,255,0.2)');
//ctx.strokestyle = 'rgba(255,255,255,0.2)';
ctx.strokestyle = color;
function drawrain(x,y)
{
//每次绘制渐变线条 都需要找到坐标
var color = ctx.createlineargradient(x,y,x+angle,y+len);
//color.addcolorstop(0,'rgba(254,139,199,0.3)');
color.addcolorstop(0,'rgba(0,0,0,0.1');
color.addcolorstop(1,'rgba(255,255,255,0.2)');
ctx.strokestyle = color;
ctx.beginpath()
ctx.moveto(x,y);
ctx.linewidth=1;
ctx.lineto(x + angle,y+len);
ctx.stroke();
}
//绘制满屏的雨滴
function fullwindowrain()
{
var i = 0;
for(i = 0;i < count; i++)
{
drawrain(w*math.random(),h*math.random());
}
}
//改变大雨或者小雨
function changerain()
{
raintimer = setinterval(function(){
count = math.ceil(500 + 100 * math.random());
},2000);
}
changerain();
redraw();
//重绘的频率
function redraw()
{
drawtimer = setinterval(function(){
ctx.clearrect(0,0,w,h+200);
fullwindowrain();
},100);
}
})();
注意：其中需要注意的每次绘制的都需要再次创建渐变色，因为创建渐变色需要坐标值。
当然，在正常的情况时需要创建几个变量俩实现对雨滴的调控的 雨滴角度，雨滴长度，雨滴数量等。
相关推荐：
js中下雨效果如何使用？总结下雨效果实例用法
javascript实现下雨效果的图文代码详解
javascript制作网页图片上实现下雨效果_javascript技巧
以上就是javascript实现下雨效果的实例分享的详细内容。