Rumah >hujung hadapan web >tutorial js >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); } })();
注意:其中需要注意的每次绘制的都需要再次创建渐变色,因为创建渐变色需要坐标值。
当然,在正常的情况时需要创建几个变量俩实现对雨滴的调控的 雨滴角度,雨滴长度,雨滴数量等。
相关推荐:
javascript制作网页图片上实现下雨效果_javascript技巧
Atas ialah kandungan terperinci javascript实现下雨效果的实例分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!