形状事件 · 前端技术总结

canvas基本图形绘制应该都会了，那么这篇讲下给canvas绘制的图形添加事件两个方式： 1. 使用ctx.isPointInPath(x, y)，判断点在不在图形内，精确但效率低 2. 使用矩形范围，判断点是否在图形的矩形范围内，不精确但效率高效果： ![](https://box.kancloud.cn/893cd427e19b3cb6a091999ace1c4e19_338x418.jpg) 代码： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas图形事件</title> <style> *{margin: 0;padding: 0;} </style> </head> <body> <canvas id="canvas" data-percent="10"></canvas> <script> var $ = document.querySelector.bind(document); var canvas = $('#canvas'), canvasWth = 500; canvasHgt = 500; canvas.width = canvasWth; canvas.height = canvasHgt; canvas.style.backgroundColor = '#999'; var ctx = canvas.getContext('2d'); // 图形点存储 var pointsObj = {}; // 矩形(使用fillRect方法不行) ctx.fillStyle = '#F86731'; ctx.rect(100, 100, 200, 100); ctx.fill(); // 点在图形内 for(var i=100; i<300; i++) { for(var j=100; j<200; j++) { if(ctx.isPointInPath(i, j)) { if(!pointsObj['rect']) { pointsObj['rect'] = {}; } pointsObj['rect']['x_'+i] = i; pointsObj['rect']['y_'+j] = j; } } } // 三角形 ctx.beginPath(); ctx.moveTo(100, 300); ctx.lineTo(160, 380); ctx.lineTo(20, 320); ctx.lineTo(100, 300); ctx.fillStyle = '#12C1BC'; ctx.fill(); ctx.closePath(); // 点在图形内 for(var i=20; i<160; i++) { for(var j=300; j<380; j++) { if(ctx.isPointInPath(i, j)) { if(!pointsObj['triangle']) { pointsObj['triangle'] = {}; } pointsObj['triangle']['x_'+i] = i; pointsObj['triangle']['y_'+j] = j; } } } // 圆形 ctx.beginPath(); ctx.arc(250, 330, 50, 0, 2*Math.PI, true); ctx.fillStyle = '#0ACB15'; ctx.fill(); ctx.closePath(); // 点在图形矩形范围内 pointsObj['circle'] = { 'xMin': 200, 'xMax': 300, 'yMin': 280, 'yMax': 380 } // 点击事件 canvas.addEventListener('click', function(e) { var x = e.pageX, y = e.pageY; // 矩形 if(pointsObj['rect']['x_'+x] && pointsObj['rect']['y_'+y]) { console.log('rect'); } // 三角形 else if(pointsObj['triangle']['x_'+x] && pointsObj['triangle']['y_'+y]) { console.log('triangle'); } // 圆 else if(pointsObj['circle'].xMin<x && x<pointsObj['circle'].xMax && pointsObj['circle'].yMin<y && y<pointsObj['circle'].yMax) { console.log('circle'); } }); // 鼠标移动事件 canvas.addEventListener('mousemove', function(e) { var x = e.pageX, y = e.pageY; // 矩形 if(pointsObj['rect']['x_'+x] && pointsObj['rect']['y_'+y]) { canvas.style.cursor = 'pointer'; } // 三角形 else if(pointsObj['triangle']['x_'+x] && pointsObj['triangle']['y_'+y]) { canvas.style.cursor = 'pointer'; } // 圆 else if(pointsObj['circle'].xMin<x && x<pointsObj['circle'].xMax && pointsObj['circle'].yMin<y && y<pointsObj['circle'].yMax) { canvas.style.cursor = 'pointer'; // 改变圆颜色 ctx.clearRect(200, 280, 100, 100); ctx.beginPath(); ctx.arc(250, 330, 50, 0, 2*Math.PI, true); ctx.fillStyle = '#1886EA'; ctx.fill(); ctx.closePath(); } // 默认 else { canvas.style.cursor = 'default'; // 恢复圆颜色 ctx.clearRect(200, 280, 100, 100); ctx.beginPath(); ctx.arc(250, 330, 50, 0, 2*Math.PI, true); ctx.fillStyle = '#0ACB15'; ctx.fill(); ctx.closePath(); } }); </script> </body> </html> ~~~ **休息了。。。** ![](https://box.kancloud.cn/01a1ed56ff1a4f2cba970739c8d25371_234x168.jpg)