1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>21-Canvas事件监听</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 canvas{ 12 display: block; 13 margin: 0 auto; 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <canvas width="500" height="400"></canvas> 20 <script> 21 /* 22 因为整个canvas是一个标签, 所以只能通过监听鼠标在canvas上的位置来判断是否需要处理对应的图形 23 * */ 24 // 1.拿到canvas 25 let oCanvas = document.querySelector("canvas"); 26 // 2.从canvas中拿到绘图工具 27 let oCtx = oCanvas.getContext("2d"); 28 // 3.绘制矩形 29 let rectX = 100; 30 let rectY = 100; 31 let rectWidth = 100; 32 let rectHeight = 100; 33 oCtx.rect(rectX, rectY, rectWidth, rectHeight); 34 oCtx.fill(); 35 36 oCtx.beginPath(); 37 oCtx.rect(200, 200, 100, 100); 38 oCtx.fill(); 39 // 4.添加点击事件 40 oCanvas.onclick = function (event) { 41 let x = event.offsetX; 42 let y = event.offsetY; 43 /* 44 if(x >= rectX && x <= rectX + rectWidth && 45 y >= rectY && y <= rectY + rectHeight){ 46 console.log("矩形被点击了"); 47 }else{ 48 console.log("矩形没有被点击"); 49 } 50 */ 51 /* 52 注意点: 53 isPointInPath方法如果开启了一个新的路径, 那么判断的就是点是否在新的路径的图形中 54 * */ 55 console.log(oCtx.isPointInPath(x, y)); 56 } 57 </script> 58 </body> 59 </html>