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.51rgb.cn/video/page-29/278.html

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

  • 相关下载