html5實作碎圖效果加上滑鼠座標把碎圖做相對移動

加上滑鼠座標判斷，將破完的圖做相對的移動
實作範例教學：

var middleX = Math.floor(($(window).width())/2);
var middleY = Math.floor(($(window).height())/2);
var capX = Math.floor(($(window).width())/20);
var capY = Math.floor(($(window).height())/20);

$('body').mousemove(function(e){
    if( doMove ){
        for( j=0;j < tmpImg.length; j++ ) {
            ctx.fillRect(tmpPosLeft[j],tmpPosTop[j],pWidth,pHeight);
            var moveX = Math.floor((middleX-e.pageX)/capX);
            var moveY = Math.floor((middleY-e.pageY)/capY);
            if( Math.abs(tmpPosLeft[j]-middleX) < capX * 2 ){
                moveX = moveX/2;
            }

            if( Math.abs(tmpPosTop[j]-middleY) < capY * 2 ){
                moveY = moveY/2;
            }

            tmpPosLeft[j] = tmpPosLeft[j] + moveX;
            tmpPosTop[j] = tmpPosTop[j] + moveY;

            ctx.putImageData(tmpImg[j],tmpPosLeft[j],tmpPosTop[j]);
            //console.log(moveX,moveY);
        }
    }
});

實作: http://excite.978.tw/html5/particle_v2.php