Canvas 中 isPointInPath

canvas 中的交互很多都可以用isPointInPath来完成
isPointInPath –就是一个检测你的点击或者触摸下是否在这个区域内。
有人会说 很简单啊 在一个区域内 四个点的坐标就可以判断 数学方式不难的
这时候要是来一个月牙形 而且在月弯的空白处点击，我 想你也会感叹 真是扯犊子般的难过了。
首先 大家都知道 canvas 是基于状态绘图的 就是先声明路径 样式 最后保存 绘画状态
说到 isPointInPath 它也是路径的 还是当前的 你之前绘制了 十条之后
突然的去判断是否在这个区域内那就 抓瞎了 那就先附上月牙的检测吧

        var canvas=document.getElementById('canvas_point');
        var context=canvas.getContext('2d');
        //加载完成就添加触摸事件
        window.onload=function()
        {           
            canvas.addEventListener('touchstart',cheeckIsPointInPath,false);            
        }
        // 接着就是检测是否在这个区域内的函数了
        function cheeckIsPointInPath(event)
            {
                var e_X=event.touches[0].clientX-canvas.getBoundingClientRect().left;
                var e_Y=event.touches[0].clientY-canvas.getBoundingClientRect().top;
                Draw();
                if(context.isPointInPath(e_X,e_Y))
                {
                    alert('在区域内');
                }else
                {
                    alert('不在区域');
                }
                context.fill();
            }
            //绘制方法 
                function  Draw()
            {
                  context.fillStyle = 'rgb(174,237,249)';
                  context.lineJoin='round';
                  context.lineWidth=50;
                  context.beginPath();
                  context.moveTo(170,516);                
                  context.lineTo(141,249);
                  context.lineTo(367,114);
                  context.lineTo(559,223);
                  context.lineTo(529,303);
                  context.lineTo(358,191);
                  context.lineTo(254,266);
                  context.lineTo(258,529);
                  context.lineTo(170,516);            
                  context.closePath();                              
            }

其实你会发现上面就只有单条绘制的状态 在判断内部几乎不用那么多 只要 获取 触摸时的坐标就好了
但是当你有多条的时候你就会想怎么办呢 ？
我用了很傻的办法 ：

function Draw_img1()
            {
                                context.beginPath();
                                context.rect(0,410,199,100);    
                                context.fillStyle='#005580';
                                context.closePath();
            }
            function Draw_img2()
            {
                                context.beginPath();
                                context.fillStyle='#005580';
                                context.rect(200,410,199,100);  
                                context.closePath();
            }
            function Draw_img3()
            {
                                context.beginPath();
                                context.fillStyle='#1B6D85';
                                context.rect(400,410,199,100);  
                                context.closePath();
            }
            var  draw=[Draw_img1,Draw_img2,Draw_img3];
//你肯定想说 javascript 的对象 你倒是用啊  存放 x y 坐标多好 。。
//奈何我才疏学浅 暂时还没有玩转canvas 只能慢慢的先摸着石头过河。
            function bet(event)
            {
                    var e_X=event.touches[0].clientX-canvas.getBoundingClientRect().left;
                    var e_Y=event.touches[0].clientY-canvas.getBoundingClientRect().top;
                    for(var i=draw.length;i--;)
                    {   
                            draw[i]();
                            if(context.isPointInPath(e_X,e_Y))
                            {                               
                                if(bet_State==true)
                                {                                   
                                    console.log(" 点击了矩形区域"+i);
                                    bet_State=false;
                                }                                           
                            }
                            //这里可以根据你的想法来的  填充不填充随你的
                            context.fill();
                    }   
                }

isPointInPath 你可以用来做 鼠标挪上去 变颜色 移走又变颜色 点击做什么事情啊
看看最新版的H5标准的 值得一瞅