<form id="htvdb"></form>

            <form id="htvdb"><nobr id="htvdb"></nobr></form>

              <address id="htvdb"></address>

              <form id="htvdb"><form id="htvdb"><nobr id="htvdb"></nobr></form></form>
              <form id="htvdb"></form>


                    51rgb-css3动画17-Canvas下雨动效制作

                    分享 :

                    网盘下载链接:

                    提取密码: u4qi
                    复制提取密码
                    51RGB在线教育,WEB前端开发直播体验课,Canvas下雨动效制作!源码下载
                    • 详情
                      文件来源

                      官方发布

                      更新日期

                      2018-01-26

                      适用平台

                      All

                      系统位数

                      ALL

                      文件格式

                      zip

                      文件语言

                      中文

                      文件授权

                      免费

                      下载次数

                      789次

                      源码,可以直接复制使用!

                      <!DOCTYPE html>
                      <html lang="en">
                      <head>
                          <meta charset="UTF-8">
                          <title></title>
                      </head>
                      
                      <style>
                          .con{
                              width: 1100px;
                              height: 366px;
                              background-image: url("http://www.chinadaily.com.cn/hqgj/jryw/201112/f8fee52e9d3103f6a89f4cb432c68e14.jpg");
                              margin: 0 auto;
                              position: relative;
                          }
                      
                      
                      
                      </style>
                      
                      <body>
                      <div class="con">
                          <canvas id="myCanvas" width=1100 height="366"style="position: absolute ; top: 0; left: 0;">
                          </canvas>
                      </div>
                      <script>
                          
                              window.onload = function () {
                                  var W = 1000, H = 500, ctx, angle = -10, len = 30, count = 850;
                      
                                  var canvas = document.getElementById('myCanvas');//找到画布
                      
                                  ctx = canvas.getContext('2d');//设置绘制环境
                      
                                  ctx.strokeStyle = 'rgba(255, 255, 250, 0.5)';//线条的样式
                                  var run = setInterval(draw, 100);
                                  function draw() {
                                      ctx.clearRect(0, 0, W, H); //起始坐标/w线条宽度 h线条高度
                                      for (var i = 1; i <= count; i++) {
                                          xiayu(Math.random() * W, Math.random() * H, angle);
                                      }
                                  }
                                  //画线
                                  function xiayu(x, y) {
                                      ctx.beginPath();
                                      ctx.moveTo(x, y);
                                      ctx.lineTo(x + angle, y + len);
                                      ctx.lineWidth = .5;
                                      ctx.stroke();
                                  }
                      
                      
                              };
                      
                      
                      
                      
                      
                      
                      
                      
                      
                      
                      
                      
                      
                      </script>
                      
                      
                      
                      </body>
                      </html>
                      
                    • 使用说明

                      本节课视频资源:

                      课程在线回放地址:http://www.gonooa.com/video/page-29/278.html

                      关注微信公众号:网页设计自学平台 回复:【css3动画】关键字即可获取全套css3动画教程及源码

                    • 相关下载
                    北京赛车玩法和赔率|官网_首页