canvas 水波效果

看到某些工具上有水波效果，想能不能用canvas实现呢，于是就google了一下还真有在这里与大家分享吧！

这里有一篇教程，介绍实现原理的，水波纹原理

 下面是js实现的源代码

var ripple = (function(img_src, container){

    var img = new Image, img_data, delay = 30, width, height, half_width, half_height, riprad = 5, oldind, newind, mapind, size, ripplemap = [], last_map = [], ripple, ripple_data, texture, texture_data, is_running = true, is_disturbed = false, timer_id, canvas = document.createElement('canvas'), /** @type {CanvasRenderingContext2D} */ ctx;

    

    function init(){

        width = img.width;

        height = img.height;

        half_width = width >> 1;

        half_height = height >> 1;

        size = width * (height + 2) * 2;

        canvas.width = width;

        canvas.height = height;

        oldind = width;

        newind = width * (height + 3);

        

        /** @type {CanvasRenderingContext2D} */

        ctx = canvas.getContext('2d');

        container.appendChild(canvas);

        ctx.drawImage(img, 0, 0, width, height);

        for (var i = 0; i < size; i++) {

            last_map[i] = ripplemap[i] = 0;

        }

        texture = ctx.getImageData(0, 0, width, height);

        texture_data = texture.data;

        ripple = ctx.getImageData(0, 0, width, height);

        ripple_data = ripple.data;

        

        

        canvas.addEventListener('mousemove', function(/* Event */evt){

            disturb(evt.offsetX || evt.layerX, evt.offsetY || evt.layerY);

        }, false);

        start();

		disturb(180,130);

    }

    

    function stop(){

        if (timer_id) 

            clearInterval(timer_id);

    }

    

    function start(){

        stop();

        timer_id = setInterval(run, delay);

    }

    

    function run(){

        if (is_disturbed) {

            newframe(width, height);

           

            ctx.putImageData(ripple, 0, 0);

        }else{

			

		}

    }

    

    function disturb(dx, dy){

        dx <<= 0;

        dy <<= 0;

        is_disturbed = true;

        

        for (var j = dy - riprad; j < dy + riprad; j++) {

            for (var k = dx - riprad; k < dx + riprad; k++) {

                ripplemap[oldind + (j * width) + k] += 4048;

            }

        }

        

        //newframe(width, height);

        //ctx.putImageData(ripple, 0, 0);

    }

    

    function newframe(){

        var i, a, b, data, cur_pixel, new_pixel, old_data;

        

        i = oldind;

        oldind = newind;

        newind = i;

        

        i = 0;

        mapind = oldind;

        var _width = width, _height = height, _ripplemap = ripplemap, _mapind = mapind, _newind = newind, _last_map = last_map, _rd = ripple.data, _td = texture.data, _half_width = half_width, _half_height = half_height, _is_disturbed = false;

        for (var y = 0; y < _height; y++) {

            for (var x = 0; x < _width; x++) {

                data = (_ripplemap[_mapind - _width] +

                _ripplemap[_mapind + _width] +

                _ripplemap[_mapind - 1] +

                _ripplemap[_mapind + 1]) >>

                1;

                

                data -= _ripplemap[_newind + i];

                data -= data >> 5;

                

                _ripplemap[_newind + i] = data;

                

                //where data=0 then still, where data>0 then wave

                data = 1024 - data;

                

                old_data = _last_map[i];

                _last_map[i] = data;

                

                if (old_data != data) {

                    //offsets

                    _is_disturbed = true;

                    a = (((x - _half_width) * data / 1024) << 0) + _half_width;

                    b = (((y - _half_height) * data / 1024) << 0) + _half_height;

                    

                    //bounds check

                    if (a >= _width) 

                        a = _width - 1;

                    if (a < 0) 

                        a = 0;

                    if (b >= _height) 

                        b = _height - 1;

                    if (b < 0) 

                        b = 0;

                    

                    new_pixel = (a + (b * _width)) * 4;

                    cur_pixel = i * 4;

                    

                    _rd[cur_pixel] = _td[new_pixel];

                    _rd[cur_pixel + 1] = _td[new_pixel + 1];

                    _rd[cur_pixel + 2] = _td[new_pixel + 2];

                    //_rd[cur_pixel + 3] = _td[new_pixel + 3];

                }

                

                ++_mapind;

                ++i;

            }

        }

        mapind = _mapind;

        is_disturbed = _is_disturbed;

    }

    

    img.onload = init;

    img.src = img_src;

    

    return {

        start: start,

        stop: stop,

        disturb: disturb

    }

});

　与大家分享了！！！

 

分割线---------------------------------------------------------------------------------