这段时间研究canvas，在交互这里遇到了比较大的坑。

　　据我目前所知，canvas纳入标准的常用交互接口（可能也就这一个）是 isPointInPath() ，它可以判断js设置的事件条件是否处于当前绘图路径中，或者说最后一个路径，具体使用如下

getMousePos(evt) { 3 var rect = document.getElementById('canvas').getBoundingClientRect(); 4 return { 5 x: evt.clientX - rect.left, 6 y: evt.clientY - rect.top 7 }; 8 } 9 10 document.getElementById(selector).addEventListener('click', function (evt) { 11 var mousePos = getMousePos(evt); 12 if (context.isPointInPath(mousePos.x, mousePos.y)) { } 15 }, false);

　　由于canvas不保存绘图路径，绘完了就bia在页面上，成死的了，因此无法对最后一条路径之前的路径重新拿出来处理。那么传统方法如何处理？--重绘，再针对每一个绘图路径使用 isPointInPath() 判断，核心代码使用如下（来自脚儿网，谢谢作者）

1 ... 2 function draw () { 3 ... 4 } 5 function circle () { 6 ... 7 } 8 9 draw(); 10 ctx.fill() 11 circle(); 12 ctx.fill() fns = [draw,circle]; 15 cvs.onmousemove = function (e) { 16 var x = e.offsetX, y = e.offsetY; 17 ctx.clearRect(0,0,400,300) 18 for(var i = fns.length;i--;) { 19 fns[i](); 20 if(ctx.isPointInPath(x,y)) { 21 ctx.fillStyle = "#f00" 22 } else { 23 ctx.fillStyle = "#000" 24 } 25 ctx.fill() 26 } 27 }

　　canvas只有一张画布，对之前任何一个路径作刷新，需要重绘所有受到影响的路径，因此，当需要重绘的动作越来越多时，就会对性能造成极大考验。作为HTML5的新宠儿，不应就此中道崩殂，我们也不想写如上略显累赘的代码。今天在查阅资料后，发现一个尚在讨论的新接口 addHitRegion()  MDN，使用简单而且可以实现良好的交互效果，目前在chrome和firefox下测试可用（需要在chrome://flags中启用【实验性画布功能】或在firefox中输入about:config使canvas.hitregions.enabled值为true）

　　具体使用如下

　　绘图时在需要添加交互事件的路径中添加如下代码

1 try { ctx.addHitRegion({ "id": "excited" }); 4 } catch (e) { 5 alert("请在chrome://flags中启用【实验性画布功能】或在firefox中输入about:config使canvas.hitregions.enabled值为true以开启更多功能~~~///(^v^)\\\~~~"); 6 }

　　需要注意的是id的值不能为空

　　然后，这样引用

1 document.getElementById(selector).addEventListener('click', function (event) { 2 if (event.region === 'excited') { 3 ... 4 } 5 }, false);

　　相当于把需要的路径标识出来后面使用，非常方便。

　　注意：该接口目前尚在实验中，在未来版本的浏览器中其语法和行为可能有所改变。未纳入标准之前，可以玩玩

　　demo: https://dachow.github.io/canvas-demo/client/