下雨的页面效果 - Newbie_小白

rainyday是一款基于 html5 canvas 的模拟下雨时雨滴打在玻璃窗上效果的js插件。该雨滴效果插件的特点是使用简单，易于集成。Rainyday.js是一个使用HTML5特性的纯js库，几乎所有的现代浏览器都支持它。

rainyday是一款基于 html5 canvas 的模拟下雨时雨滴打在玻璃窗上效果的js插件。该雨滴效果插件的特点是使用简单，易于集成。

使用方法

在页面中引入rainyday.js文件。

<script src="http://maroslaw.github.io/rainyday.js/dist/rainyday.0.1.2.min.js">

然后可以按照下面的方法调用插件。

var engine = new RainyDay({
    image: element,                                             // Image element         image：模拟玻璃窗的图片元素，必须填写。
                                                                         // This value is required
    parentElement: someDiv, 　　　　　　　　// Element to be used as a parent for the canvas  parentElement：canvas的父元素，如果不提供则默认为body。
 　　　　　　　　　　　　　　　　　　　　    // If not provided assuming the 'body' element
    crop: [0, 0, 50, 60],  　　　　　　　　　 // Coordinates if only a part of the image should be used  crop：如果只使用图像的某一部分，用此参数提供坐标。如果不提供则默认为整幅图片
　　　　　　　　　　　　　　　　　　　　 // If not provided entire image will be used
    blur: 10,             　　　　　　　　　    // Defines blur due to rain effect  blur：定义模糊的下雨雨滴效果。如果不提供值，默认为10。设置为0表示无模糊效果。
   　　　　　　　　　　　　　　　　　　 // Assuming 10 if not provided
 　　　　　　　　　　　　　　　　　    // Use 0 value to disable the blur
    opacity: 1          　　　　　　　　  // Opacity of rain drops   opacity：定义雨滴的透明度。如果不提供默认为1。

 　　　　　　　　　　　　　　　　    // Assuming 1 if not provided
});
engine.rain(
        [
            [1, 0, 20],                        // add 20 drops of size 1...
            [3, 3, 1]                         // ... and 1 drop of size from 3 - 6 ...
        ],
        100);                              // ... every 100ms

浏览器兼容

Rainyday.js是一个使用 HTML5 特性的纯js库，几乎所有的现代浏览器都支持它。

Internet Explorer 9+
Firefox 23+
Chrome 27+
Chrome mobile
Safari 5.1+
Opera 12.16+

HTMl：

<!DOCTYPE >
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #rain_img {
            width: 560px;
            height: 370px;
        }
    </style>
    <script src="http://maroslaw.github.io/rainyday.js/dist/rainyday.0.1.2.min.js">
    </script>

    <!--使用js 方法调用 -->
    <script type="text/javascript">
        function run() {
            var image = document.getElementById("rain_img");
            image.onload = function () {
                //设定一个rain对象
                var oEngine = new RainyDay({
                    image: this,
                });
                oEngine.rain([
                    [1, 2, 5000]
                ]); //设定雨滴大小 1,2  数量5000(宽、高、雨点量)
                oEngine.rain([
                    [3, 3, 0.88],
                    [5, 5, 0.9],
                    [6, 2, 1]
                ], 100); //设定雨滴重复时间 100ms(宽、高、)
            }
            image.crossOrigin = "anonymous";
            image.src = "img/love4.png";
        }
    </script>
</head>

<body>
<!--js模拟下雨效果的插件-->

<div class="rain">

    <img id="rain_img" src="img/love4.png" alt="点击图片" onClick="run();"/>

</div>

</body>

</html>

result（初始）：

result（点击之后）：

posted on 2016-05-15 10:49 Newbie_小白阅读(976) 评论(0) 编辑收藏举报