一直都想寫一個下雨的效果，可是無論是時間上，還是從自身來說，都本能的去躲避，沒有太多正面面對的勇氣，即使這個效果也不難實現。看來，在修練的歷程上，還需要更進一步加強才行。 由於採用的是很簡單的方法，程式碼也沒幾行，所以思路實現了下，程式碼主要話，主要是採用的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);
}
})();注意：其中需要注意的每次繪製的都需要再次創建漸變色，因為創建漸變色需要坐標值。
當然，在正常的情況時需要創建幾個變量倆實現對雨滴的調控的 雨滴角度，雨滴長度，雨滴數量等。
相關推薦：
javascript製作網頁圖片上實作下雨效果_javascript技巧
以上是javascript實作下雨效果的實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
