php下雨效果源码,javascript实现下雨效果的实例分享

一直都想写一个下雨的效果，可是无论是时间上，还是从自身来说，都本能的去躲避，没有太多正面面对的勇气，即使这个效果也不难实现。看来，在修炼的历程上，还需要更进一步加强才行。由于采用的是很简单的方法，代码也没几行，思路实现了下，代码主要话，主要是采用的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);

}

})();

注意：其中需要注意的每次绘制的都需要再次创建渐变色，因为创建渐变色需要坐标值。

当然，在正常的情况时需要创建几个变量俩实现对雨滴的调控的 雨滴角度，雨滴长度，雨滴数量等。

相关推荐：