HTML5(jQuery)制作下雨效果
发布时间：2017年2月12日 作者：未知 查看次数：1277
自:http://jingyan.baidu.com/article/92255446878161851648f4ae.html 修改代码： <pre name="code" class="html"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5下雨效果</title>
</head>
<body> <div style="position:relative"> <div style="width:480px;height:800px;background:url(images/1.jpg) repeat scroll 0 0;background-color:#CCCCCC;"></div> <canvas id="myCanvas" width="480" height="600" style="position:absolute;left:0;top:0;z-index:5;"></canvas> </div> <script src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function () { var W = 480, H = 800, ctx, angle = 0, len = 20, count = 250; var canvas = $("#myCanvas")[0]; ctx = canvas.getContext('2d'); console.log(W, H); ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'; var run = setInterval(draw, 200); function draw() { ctx.clearRect(0, 0, W, H); xiayus(); } //画线 function xiayu(x, y, r) { len=5+Math.random() * 20; ctx.beginPath(); ctx.moveTo(x, y); //console.log(y, len); ctx.lineTo(x + angle, y + len); ctx.lineWidth = 1; ctx.stroke(); } function xiayus() { for (var i = 1; i <= count; i++) { xiayu(Math.random() * W, Math.random() * H, angle); } } }); </script> </body>
</html>
|
||||||
|
||||||
