本文主要是介绍html怎么做下雨效果,HTML5 canvas制作逼真的下雨雨滴效果js插件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
rainyday是一款基于 html5 canvas 的模拟下雨时雨滴打在玻璃窗上效果的js插件。该雨滴效果插件的特点是使用简单，易于集成。
使用方法
在页面中引入rainyday.js文件。
然后可以按照下面的方法调用插件。
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+
效果预览
下面是Rainyday几种效果的截图：
这篇关于html怎么做下雨效果,HTML5 canvas制作逼真的下雨雨滴效果js插件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
