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>

21-canvas事件监听的更多相关文章

  1. WebView使用详解（二）——WebViewClient与常用事件监听

      登录|注册     关闭 启舰 当乌龟有了梦想……       目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书      免费直播:AI时代,机器学习如何入门?      程序员8 ...

  2. Java中用得比较顺手的事件监听

    第一次听说监听是三年前,做一个webGIS的项目,当时对Listener的印象就是个"监视器",监视着界面的一举一动,一有动静就触发对应的响应. 一.概述 通过对界面的某一或某些操 ...

  3. Netty事件监听和处理（下）

    上一篇 介绍了事件监听.责任链模型.socket接口和IO模型.线程模型等基本概念,以及Netty的整体结构,这篇就来说下Netty三大核心模块之一:事件监听和处理. 前面提到,Netty是一个NIO ...

  4. js事件监听机制(事件捕获)

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  5. spring boot实战(第二篇)事件监听

    http://blog.csdn.net/liaokailin/article/details/48186331 前言 spring boot在启动过程中增加事件监听机制,为用户功能拓展提供极大的便利 ...

  6. 关于vue事件监听的一个问题

    由于新工作需要用vue,所以最近接触最多的也是vue,因为之前一直在用react,所以对于vue上手还是很快的.我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间 ...

  7. Java事件监听机制与观察者设计模式

    一. Java事件监听机制 1. 事件监听三要素: 事件源,事件对象,事件监听器 2. 三要素之间的关系:事件源注册事件监听器后,当事件源上发生某个动作时,事件源就会调用事件监听的一个方法,并将事件对 ...

  8. 4.JAVA之GUI编程事件监听机制

    事件监听机制的特点: 1.事件源 2.事件 3.监听器 4.事件处理 事件源:就是awt包或者swing包中的那些图形用户界面组件.(如:按钮) 事件:每一个事件源都有自己特点有的对应事件和共性事件. ...

  9. Node.js 教程 05 - EventEmitter(事件监听/发射器 )

    目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...

  10. .NET事件监听机制的局限与扩展

    .NET中把“事件”看作一个基本的编程概念,并提供了非常优美的语法支持,对比如下C#和Java代码可以看出两种语言设计思想之间的差异. // C#someButton.Click += OnSomeB ...

随机推荐

  1. InvalidOperationException Cannot modify ServiceCollection after application is built .Net6 异常

    背景 我用了一个叫Unchase.Swashbuckle.AspNetCore.Extensions的库来加强Swagger的文档,我一般写法是这样的: builder.Services.AddSwa ...

  2. FFmpeg开发笔记（三十一）使用RTMP Streamer开启APP直播推流

    ​RTMP Streamer是一个安卓手机端的开源RTMP直播推流框架,可用于RTMP直播和RTSP直播,其升级版还支持SRT直播(腾讯视频云就采用SRT协议).RTMP Streamer支持的视频编 ...

  3. P1551 亲戚 题解。。。

    并查集 目录 并查集 (1.概念: (2.详解 Q1:如何表示不同的家族 ans1: Q2:如何将两个人归到同一个家族中 ans2: CODE: PS: (1.概念: 处理 不相交 可合并 的集合关系 ...

  4. .NET使用CsvHelper快速读取和写入CSV文件

    前言 在日常开发中使用CSV文件进行数据导入和导出.数据交换是非常常见的需求,今天我们来讲讲在.NET中如何使用CsvHelper这个开源库快速实现CSV文件读取和写入. CsvHelper类库介绍 ...

  5. 修改Git Commit提交记录的用户名Name和邮箱Email

    修改Git 本次Commit提交记录的用户名Name和邮箱Email git commit --amend --author="new-name <xxx@new.com>&qu ...

  6. 【建议收藏】Go语言关键知识点总结

    容器 数组和切片 在Go语言中,数组和切片是两个基本的数据结构,用于存储和操作一组元素.它们有一些相似之处,但也有许多不同之处.下面我们详细介绍数组和切片的特点.用法以及它们之间的区别. 数组 数组是 ...

  7. mac环境搭建

    brew 参考:https://zhuanlan.zhihu.com/p/111014448 ## 更新 homebrew-cask cd "$(brew --repo)"/Lib ...

  8. 使用sqlcel导入数据时出现“a column named '***' already belongs to this datatable”问题的解决办法

    我修改编码为GBK之后,选择导入部分字段,如下: 这样就不会出现之前的问题了,完美 ----------------------------------------------- 但是出现一个问题,我 ...

  9. 【Mysql】Mysql字符集CHARACTER和COLLATE

    一:设置服务器默认字符集为 utf8mb4 创建数据库时,如果没有指定字符集,会采用服务器的默认字符集.设置服务器默认字符集为 utf8mb4 可以提高便利性. 编辑 MySQL 的配置文件,修改服务 ...

  10. position的值， relative和absolute分别是相对于谁进行定位的？

    relative:  相对定位,相对于自己本身在正常文档流中的位置进行定位 相对它原来的位置,在走100px.原来在标准流中的位置继续占有. absolute: 生成绝对定位,相对于最近一级定位不为s ...