洪水填充（flood fill）

前面说过用html5做一个画板开发，众所周知画板都会有一个很实用的功能就是喷漆，这个用js实现也不难但是就是很考验算法优化问题了 再次附上自己的喷漆算法（使用的事递归，但是时间效率上面还是不尽人意 用的是系统栈 所以比较大的填充区域会提示栈的溢出 但是功能还是能够实现的 也再次情各路大神帮忙优化一下算法）

function pigment(){
    
    $("#input").hide();
    $("iframe").hide();
    $("#people_add").hide();
    $("#InterCanvas").unbind();
    var dObj = document.getElementById("InterCanvas");
    var ctx = dObj.getContext("2d"); 
    var widht = window.innerWidth;
    var heiht = window.innerHeight;
    var xxx = 0;
    var l = 1,color;
        var touch =("createTouch" in document);//判定是否为手持设备 
    var StartEvent = touch ? "touchstart" : "mousedown";//支持触摸式使用相应的事件替代 
    var EndEvent   = touch ? "touchend"   :"mouseup";
    $('#InterCanvas').bind(EndEvent,ff);
    $('#InterCanvas').bind(StartEvent,dd);
    function ff(){
        get();
    }
    function dd(e){
        var Touch = touch ? e.originalEvent.touches[0] : e; 
        var x=Touch.clientX - Touch.target.offsetLeft;//鼠标在画布上的x坐标，以画布左上角为起点 
        var y=Touch.clientY - Touch.target.offsetTop;//鼠标在画布上的y坐标，以画布左上角为起点 
        color = $("#color").css("backgroundColor");
        xxx = data(x,y);
        all(x,y);
    }
    function data(x,y){
            var imgData=ctx.getImageData(x,y,1,1);
            var s = 0;
            for(var i = 0 ; i < 4 ; i++ )
                s += imgData.data[i];
            return s;
    }
    function fill(x,y){
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.fillRect(x,y,l,l);
        ctx.stroke(); 
    }
    function all(x,y){
            var s = data(x,y);
            if(s != xxx )return;
            else if(x <= 0 || x >= widht || y <=0 || y >= heiht )return;
            else{
                        fill(x,y);
                        all(x,y-l);
                        all(x,y+l);
                        all(x-l,y);
                        all(x+l,y);
            }
    }


}

 再次再附上自己查到的一些资料

http://en.wikipedia.org/wiki/Flood_fill

http://www.htmlgoodies.com/primers/jsp/article.php/3622321/Javascript-Basics-Part-12.htm