rainyday是一款基于 html5 canvas 的模拟下雨时雨滴打在玻璃窗上效果的js插件。该雨滴效果插件的特点是使用简单，易于集成。
使用方法
在页面中引入rainyday.js文件。
<script src="js/rainyday.js"></script> |
然后可以按照下面的方法调用插件。
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+
网盘下载密码：s93y
