形狀事件 · 前端技術總結

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)