21-canvas事件监听

 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>