标签：判断 draw div 事件操作 执行 class var lin padding
canvas 里绘制的图形不是一个实体 DOM，所以要给每个绘制的图形添加事件操作比给 DOM 添加事件要复杂很多。
所以，我们需要使用一个 canvas 的 isPointInPath(x, y) 方法，来获取鼠标相对于浏览器的坐标，然后还需要计算出鼠标相对于 canvas 画布的坐标，最后通过 isPointInPath(x, y) 方法判断此坐标是否在绘制的元素上，进行相应的操作。
isPointInPath() 方法是针对的当前绘制的路径，而鼠标在执行操作的时候，我们会根据需要监听鼠标的事件，当鼠标事件符合我们要求的时候，就对画布进行重绘。在重绘的时候，每画一条路径就调用一次 isPointInPath(x, y) 方法，判断鼠标操作的点是不是在这个绘制的元素身上，如果在，就可以对当前绘制的这个元素进行自定义操作了。
以下是绘制两个图形，并监听 mousemove 事件，来判断鼠标是否在图形上的 demo：
<style type="text/css"> *{margin:0;padding:0;} .canvas-box {position: relative;} canvas {box-shadow: 0 0 10px rgba(0,0,0,0.2) } </style> <div class="canvas-box"> <canvas id="cvs" width="500" height="400">不支持canvas</canvas> </div> <script> var cvs = document.getElementById(‘cvs‘); var ctx = cvs.getContext(‘2d‘); // 封装绘制的图形 function draw () { ctx.fillStyle = ‘#000‘; ctx.beginPath(); ctx.moveTo(100,100); ctx.bezierCurveTo(110,110,199,278,300,379); ctx.lineTo(400,100) ctx.closePath(); } function circle () { ctx.fillStyle = ‘#000‘; ctx.beginPath(); ctx.arc(100,200,50,0,Math.PI*2) ctx.closePath(); } // 初始化绘制图形 draw(); ctx.fill() circle(); ctx.fill() var fns = [draw,circle]; // 监听鼠标事件 cvs.onmousemove = function (e) { // 得到鼠标的坐标 var x = e.pageX, y =e.pageY; ctx.clearRect(0,0,400,300) // 遍历绘制图形 for(var i = fns.length; i--;) { fns[i](); // 每绘制一个图形就判断一次当前鼠标的坐标是否在这个图形上，然后进行自定义操作 if(ctx.isPointInPath(x,y)) { ctx.fillStyle = "#f00" } else { ctx.fillStyle = "#000" } ctx.fill() } } </script>
canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上
标签：判断 draw div 事件操作 执行 class var lin padding
原文地址：http://www.cnblogs.com/3body/p/6839675.html
