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

当前位置:主页 > Html5库 > html5 canvas > HTML5 canvas制作逼真的下雨雨滴效果js插件
HTML5 canvas制作逼真的下雨雨滴效果js插件
分享:

    插件介绍

    rainyday是一款基于 html5 canvas 的模拟下雨时雨滴打在玻璃窗上效果的js插件。该雨滴效果插件的特点是使用简单,易于集成。Rainyday.js是一个使用HTML5特性的纯js库,几乎所有的现代浏览器都支持它。

    浏览器兼容性

    浏览器兼容性
    时间:2015-02-06
    阅读:
简要教程

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+

效果预览

下面是Rainyday几种效果的截图:

Rainyday雨滴效果-1

Rainyday雨滴效果-2

Rainyday雨滴效果-3

Rainyday雨滴效果-4