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

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

1 //获取鼠标指针坐标 2 function 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)) {13         //重绘14     }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()13 14 var 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()  ，使用简单而且可以实现良好的交互效果，目前在chrome和firefox下测试可用（需要在chrome://flags中启用【实验性画布功能】或在firefox中输入about:config使canvas.hitregions.enabled值为true）

　　具体使用如下

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

1 try {2     //id为空会报错3     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: