本文主要介绍了javascript实现下雨效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
效果图:
代码如下:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>梦柯教育-锤子老师</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;color:#fff;} body { overflow: hidden; background: black; text-align: center; line-height: 20px; } </style> </head> <body><a href="https://jq.qq.com/?_wv=1027&k=469M8qI" rel="external nofollow" id="show" style="position:absolute;bottom:0;left:10px;"></a> <canvas id="canvas-club" width="1920" height="666"></canvas> <script type="text/javascript"> eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}; if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c); k=[function(e){return r[e]}];e=function(){return'\\w+'}; c=1}; while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]); return p}('d c=1h.1d("1b-19"); d 7=c.14("W"); d w=c.I=f.z; d h=c.H=f.G; d E=\'18(0, 0, 0, .15)\'; d A=Z; d k=[]; e g(a,b){16 1a.g()*(b-a)+a}e O(){}O.X={v:e(){6.x=g(0,w); 6.y=0;6.B=\'U(C, m%, D%)\'; 6.w=2;6.h=1;6.F=g(4,5);6.t=3;6.s=1;6.q=2;6.n=g(h*.8,h*.9); 6.a=1;6.J=.V},K:e(){l(6.y>6.n){7.T();7.Y(6.x,6.y-6.h/2); 7.L(6.x+6.w/2,6.y-6.h/2,6.x+6.w/2,6.y+6.h/2,6.x,6.y+6.h/2); 7.L(6.x-6.w/2,6.y+6.h/2,6.x-6.w/2,6.y-6.h/2,6.x,6.y-6.h/2); 7.10=\'11(C, m%, D%, \'+6.a+\')\';7.12();7.13()}u{7.M=6.B; 7.N(6.x,6.y,6.q,6.q*5)}6.P()},P:e(){l(6.y<6.n){6.y+=6.F}u{l(6.a>.17){6.w+=6.t;6.h+=6.s; l(6.w>m){6.a*=6.J;6.t*=.Q;6.s*=.Q}}u{6.v()}}}}; e p(){w=c.I=f.z;h=c.H=f.G} e R(){S(d i=0;i<A;i++){(e(j){1c(e(){d o=1e O();o.v();k.1f(o)},j*1g)}(i))}} e r(){7.M=E;7.N(0,0,w,h);S(d i 1i k){k[i].K()}1j(r)}f.1k("p",p); R(); r();',62,83,'||||||this|ctx||||||var|function|window|random||||drops|if|100|hit||resize|size|anim|vh|vw|else|init|| ||innerWidth|max|color|180|50|clearColor|vy|innerHeight|height|width|va|draw|bezierCurveTo|fillStyle|fillRect| |update|98|setup|for|beginPath|hsl|96|2d|prototype|moveTo|30|strokeStyle|hsla|stroke|closePath|getContext|08|return|03|rgba|club|Math|canvas |setTimeout|getElementById|new|push|200|document|in|requestAnimationFrame|addEventListener'.split('|'),0,{})) var str = "点击我们学习更多内容"; setTimeout(function(){ document.getElementById("show").innerHTML=str; },3000) </script> </body> </html>
The above is the detailed content of Detailed explanation of graphic and text code for javascript to achieve rain effect. For more information, please follow other related articles on the PHP Chinese website!