html 水纹效果原理,HTML5 canvas水波纹动画特效

这是一款HTML5 canvas水波纹动画特效。该水波纹动画以插件的形式进行编写，可以是纯js插件，或通过jquery插件来进行调用。它能够制作出逼真的水波纹动画效果。/p>

使用方法

在页面中引入jquery和jquery.waterrippleeffect.min.js文件。

HTML结构

使用一个

作为该水波纹动画特效的HTML结构：

初始化插件

通过纯js的方式来调用该水波纹动画效果的代码如下：

function init() {

//Settings - params for WaterRippleEffect

var settings = {

image: './img/SwimmingPool.jpg',//背景图片

rippleRadius: 3,//radius of the ripple

width: 480,//width

height: 480,//height

delay: 1,//if auto param === true. 1 === 1 second delay for animation

auto: true//if auto param === true, animation starts on it´s own

};

//------------------------------------------------------------------------

//standalone

//初始化

var waterRippleEffect = new