rainyday.js 下雨效果插件使用方法
来源:互联网 发布:西贝柳斯软件配置 编辑:程序博客网 时间:2024/05/17 02:51
插件介绍
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 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。
阅读全文
0 0
- rainyday.js 下雨效果插件使用方法
- 使用rainyday.js插件制作雨滴效果
- 用js实现下雨效果
- Rainyday.js – 傻眼了!竟然有如此逼真的雨滴效果
- Rainyday.js – 傻眼了!竟然有如此逼真的雨滴效果
- 下雨效果
- 下雨效果
- rainday.js实现canvas绘制下雨的效果
- PS7.0 下雨效果
- 简单PS下雨效果
- 页面下雨效果
- 有趣的下雨效果
- unity3D 下雨效果实现
- css3写下雨效果
- headroom.js插件使用方法
- headroom.js插件使用方法
- Headroom.js插件使用方法
- 【Android效果集】下雨效果
- 16级训练赛一
- 有序数组的合并
- python构造json格式的post请求访问flask server
- 网络篇二---linux常用网络指令
- 关键点和跟踪基础——learning opencv3第16章翻译 一
- rainyday.js 下雨效果插件使用方法
- Hdu-6071 Lazy Running(trick最短路)
- Access导入MDB文件
- HTML5_表单的补充、浮动框架、谷歌专用标签、高亮标签
- centos下的中文分词coreseek-4.1的编译安装与基本配置
- spring requestmapping produce consume
- Centos7 编译安装mysql5.6
- 全景图的各种制作方法~~
- Face The Right Way POJ