HTML5 Canvas逼真水波纹动画特效

    HTML5 Canvas实现的逼真粒子水波纹涟漪动画效果，刚打开有个非常漂亮的载入动画，然后出现背景图和“start demo”字样，点击start demo，你会看到背景上出现水波涟漪，和真实的非常想，鼠标在上面滑动，还有水波涟漪跟在后面，以前这都得借助flash才能实现，现在Canvas配合JS就能实现了。这个效果可以用来点缀网页，例如logo等，应该很不错。
1、引入下面的js文件

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.waterrippleeffect.min.js"></script>

2、在需要使用本效果的地方加入下面的html代码：

<div id='holder' style='width:480px; height:480px; position:absolute;'></div>
<div id='startDiv' style='background-color:#000; position:absolute; width:480px; height:480px;'>
    <img src='img/startBt.jpg' width='480px' height='480px' alt='Start' style='position:absolute; top:50%; left:50%; margin-top:-240px; margin-left:-240px;'>
</div>
<div id='preloaderDiv' style='background-color:#000; position:absolute; width:480px; height:480px; pointer-events:none'>
    <img src='img/PreloaderDark.gif' width='44px' height='48px' alt='Preloader' style='position:absolute; top:50%; left:50%; margin-top:-22px; margin-left:-24px;'>
</div>

3、在body前面加入下面的代码：

<script>
    $( document ).ready( function() {
        $( '#preloaderDiv' ).delay( 1000 ).fadeTo( 1000 , 0, function() {
            $( this ).css( 'display', 'none' );
        } );
        $( '#startDiv' ).css( 'cursor', 'pointer' ).click( function() {
            $( this ).delay( 10 ).fadeTo( 1000 , 0, function() {
                $( this ).css( 'display', 'none' );
            } );
            init();
        } );
        function init() {
            //Settings - params for WaterRippleEffect
            var settings = {
                image: './img/SwimmingPool.jpg',//image path
                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
            //init
            var waterRippleEffect = new WaterRippleEffect( document.getElementById( 'holder' ), settings );
            document.getElementById( 'holder' ).style.cursor = 'pointer';
            //on click
            document.getElementById( 'holder' ).addEventListener( 'click', function( e ) {
                var mouseX = e.layerX;
                var mouseY = e.layerY;
                waterRippleEffect.disturb( mouseX, mouseY );
            } );
            //on mousemove
            document.getElementById( 'holder' ).addEventListener( 'mousemove', function( e ) {
                var mouseX = e.layerX;
                var mouseY = e.layerY;
                waterRippleEffect.disturb( mouseX, mouseY );
            } );
        };
    } );
</script>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！