Home >Web Front-end >JS Tutorial >Detailed explanation of graphic and text code for javascript to achieve rain effect

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

黄舟Original: 2017-03-27 14:20:052367browse

本文主要介绍了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?&#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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of JavaScript seamless scrolling effect example codeNext article：Detailed explanation of JavaScript seamless scrolling effect example code

See more

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

Related articles