Maison > Article > interface Web > Explication détaillée du code graphique et textuel pour javascript pour obtenir l'effet de pluie

Explication détaillée du code graphique et textuel pour javascript pour obtenir l'effet de pluie

黄舟original: 2017-03-27 14:20:052312parcourir

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'exemple de code d'effet de défilement transparent JavaScriptArticle suivant：Explication détaillée de l'exemple de code d'effet de défilement transparent JavaScript

Articles Liés

Voir plus