当前位置：首页 > 网页特效 > 动画效果

HTML5 canvas制作逼真的下雨雨滴效果js插件

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<script src="js/rainyday.js"></script>
```
然后可以按照下面的方法调用插件。

```html
var engine = new RainyDay({
    image: element,         // Image element
                            // This value is required
    parentElement: someDiv, // Element to be used as a parent for the canvas
                            // If not provided assuming the 'body' element
    crop: [0, 0, 50, 60],   // Coordinates if only a part of the image should be used
                            // If not provided entire image will be used
    blur: 10,               // Defines blur due to rain effect
                            // Assuming 10 if not provided
                            // Use 0 value to disable the blur
    opacity: 1              // Opacity of rain drops
                            // 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
```
#####  配置参数
- image：模拟玻璃窗的图片元素，必须填写。
- parentElement：canvas的父元素，如果不提供则默认为body。
- crop：如果只使用图像的某一部分，用此参数提供坐标。如果不提供则默认为整幅图片。
- blur：定义模糊的下雨雨滴效果。如果不提供值，默认为10。设置为0表示无模糊效果。
- opacity：定义雨滴的透明度。如果不提供默认为1。
#####  浏览器兼容
Rainyday.js是一个使用 HTML5 特性的纯js库，几乎所有的现代浏览器都支持它。

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

web299.com

HTML5 canvas制作逼真的下雨雨滴效果js插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果