《JavaScript网页特效实例大全》1.3下雨效果

Bertha 。 2021-06-24 16:11 486阅读 0赞

代码部分：

<!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <meta charset="utf-8" />
       <title>1.3 下雨效果</title>
       <style>
           canvas { position: absolute; z-index: 10; top: 0; left: 0; opacity: 0.5; }
       </style>
       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
    
       <script type="text/javascript">
           $(function () {
               var W = $(window).width(),
                   H = $(window).height(),
                   x2 = -15, len = 30, count = 100;
               var canvas = document.getElementById("snow");
               canvas.width = W;
               canvas.height = H;
               var ctx = canvas.getContext('2d');
    
               setInterval(clearCanvas,100);
               function clearCanvas() {
                   ctx.clearRect(0, 0, W, H);
                   draws();
               }
    
               function draw(x, y) {
                   //canvas写渐变：createLinearGradient（startX,startY,endX,endY）
                   var grd = ctx.createLinearGradient(x, y, x + x2, y + len);
                   grd.addColorStop(0, "rgba(0,0,0,0)");
                   grd.addColorStop(0.5, "rgba(105,105,105,1)");
                   grd.addColorStop(1, "rgba(255,255,255,1)");
                   ctx.strokeStyle = grd;
    
                   ctx.beginPath();
                   ctx.moveTo(x, y);
                   ctx.lineTo(x + x2, y + len);
                   ctx.lineWidth = 2;
                   ctx.stroke();
                   ctx.closePath();
               }
               function draws() {
                   for (var i = 1; i <= count; i++) {
                       console.log(i)
                       draw(Math.random() * W, Math.random() * H);
                   }
               }
           });
       </script>
    
    
    
    </head>
    <body bgcolor="black">
    
    <canvas id="snow">不支持canvas</canvas>
    <p style="color:white">谢谢观看</p>
    </body>
    </html>

![2789632-70339cf6e0fb0f2b.gif][]

![2789632-3b18269684ea9294.png][]

公众号.png

[2789632-70339cf6e0fb0f2b.gif]: /images/20210615/b37c28fd2a9d480cb8df6965c5115b9e.png
[2789632-3b18269684ea9294.png]: /images/20210615/de5c4c40256b49959c9e0cadd94b030a.png