zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    初探CSS
    初探CSS -3 语法
    初探 -1 JavaScript
    初探html-17 表单
    初探html-9 链接
    python 发送邮件
    检查xml文件
    python文件和目录操作方法大全(含实例)
    使用ADB无线连接Android真机进行调试
    安卓APP应用在各大应用市场上架方法整理
  • 原文地址:https://www.cnblogs.com/gsq1998/p/12166274.html
Copyright © 2011-2022 走看看