JavaScript实例-页面特效2-下雨效果

作者: 张中华 | 来源:发表于2018-01-06 19:46 被阅读0次

JavaScript实例-页面特效2-下雨效果
关于JavaScript的那点事（二）
html+css布局
原生JavaScript中动画与特效的实现原理
网站开发需要的知识结构
前端（JavaScript）
前端（十）
js基础
前端学习代码实例-JavaScript 页面跳转效果
前端学习代码实例-JavaScript 页面跳转效果

代码部分：

<!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>