基于HTML5 Canvas实现雨滴效果： Rainday.js_H5之家 - 中国HTML5教程资源分享第一站

当前位置：主页 > 软件开发 > 编程综合 >

基于HTML5 Canvas实现雨滴效果： Rainday.js

发布时间：2016-07-29 18:45 | 作者：采集侠 | 来源：网络整理 | 浏览：

一个简单的脚本来模拟雨滴落在玻璃表面效果。rainyday.js拥有功能可扩展的API，碰撞检测，并很容易用自己不同的动画组件实现扩展。Rainyday.js是一个纯的JavaScript库，用到了HTML5的特性，所以都支持大多数现代浏览器它。How to use: var engine = new RainyDay({ element: image, // 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);

收藏 |

上一篇：通过 Doctype 启用浏览器模式

下一篇：轻量级 Button CSS 组件库：easyBtn