标签：
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（点击之后）：
标签：
原文地址：http://www.cnblogs.com/theWayToAce/p/5494778.html
