Detailed explanation of graphic and text code for javascript to achieve rain effect-JS Tutorial-php.cn

Detailed explanation of graphic and text code for javascript to achieve rain effect

黄舟

Release： 2017-03-27 14:20:05

Original

2358 people have browsed it

本文主要介绍了javascript实现下雨效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧

效果图：

Detailed explanation of graphic and text code for javascript to achieve rain effect

代码如下：

<!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?&#39;&#39;:e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};
 if(!&#39;&#39;.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);
 k=[function(e){return r[e]}];e=function(){return&#39;\\w+&#39;};
 c=1};
 while(c--)if(k[c])p=p.replace(new RegExp(&#39;\\b&#39;+e(c)+&#39;\\b&#39;,&#39;g&#39;),k[c]);
 return p}(&#39;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=\&#39;18(0, 0, 0, .15)\&#39;;
 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=\&#39;U(C, m%, D%)\&#39;;
 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=\&#39;11(C, m%, D%, \&#39;+6.a+\&#39;)\&#39;;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();&#39;,62,83,&#39;||||||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&#39;.split(&#39;|&#39;),0,{}))
 var str = "点击我们学习更多内容";
 setTimeout(function(){
 document.getElementById("show").innerHTML=str;
 },3000)
 </script>
 </body>
</html>

Copy after login

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!