插件介紹
rainyday是一款基于 html5 canvas 的模擬下雨時雨滴打在玻璃窗上效果的js插件。該雨滴效果插件的特點是使用簡單，易于集成。Rainyday.js是一個使用HTML5特性的純js庫，幾乎所有的現代瀏覽器都支持它。

簡要教程

rainyday是一款基于 html5 canvas 的模擬下雨時雨滴打在玻璃窗上效果的js插件。該雨滴效果插件的特點是使用簡單，易于集成。

使用方法

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

<script src="js/rainyday.js"></script>

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

var engine = new RainyDay({image: element, // Image element// This value is requiredparentElement: someDiv, // Element to be used as a parent for the canvas// If not provided assuming the 'body' elementcrop: [0, 0, 50, 60], // Coordinates if only a part of the image should be used// If not provided entire image will be usedblur: 10, // Defines blur due to rain effect// Assuming 10 if not provided// Use 0 value to disable the bluropacity: 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 下雨效果插件使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。