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>
21-canvas事件监听的更多相关文章
- WebView使用详解（二）——WebViewClient与常用事件监听
登录|注册 关闭 启舰 当乌龟有了梦想…… 目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书 免费直播:AI时代,机器学习如何入门? 程序员8 ...
- Java中用得比较顺手的事件监听
第一次听说监听是三年前,做一个webGIS的项目,当时对Listener的印象就是个"监视器",监视着界面的一举一动,一有动静就触发对应的响应. 一.概述 通过对界面的某一或某些操 ...
- Netty事件监听和处理（下）
上一篇 介绍了事件监听.责任链模型.socket接口和IO模型.线程模型等基本概念,以及Netty的整体结构,这篇就来说下Netty三大核心模块之一:事件监听和处理. 前面提到,Netty是一个NIO ...
- js事件监听机制(事件捕获)
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- spring boot实战(第二篇)事件监听
http://blog.csdn.net/liaokailin/article/details/48186331 前言 spring boot在启动过程中增加事件监听机制,为用户功能拓展提供极大的便利 ...
- 关于vue事件监听的一个问题
由于新工作需要用vue,所以最近接触最多的也是vue,因为之前一直在用react,所以对于vue上手还是很快的.我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间 ...
- Java事件监听机制与观察者设计模式
一. Java事件监听机制 1. 事件监听三要素: 事件源,事件对象,事件监听器 2. 三要素之间的关系:事件源注册事件监听器后,当事件源上发生某个动作时,事件源就会调用事件监听的一个方法,并将事件对 ...
- 4.JAVA之GUI编程事件监听机制
事件监听机制的特点: 1.事件源 2.事件 3.监听器 4.事件处理 事件源:就是awt包或者swing包中的那些图形用户界面组件.(如:按钮) 事件:每一个事件源都有自己特点有的对应事件和共性事件. ...
- Node.js 教程 05 - EventEmitter(事件监听/发射器 )
目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...
- .NET事件监听机制的局限与扩展
.NET中把“事件”看作一个基本的编程概念,并提供了非常优美的语法支持,对比如下C#和Java代码可以看出两种语言设计思想之间的差异. // C#someButton.Click += OnSomeB ...
随机推荐
- VIP视频解析
效果图 新建窗口 import tkinter as tk# 创建一个窗口 root = tk.Tk() # 设置窗口大小 root.geometry('700x250+200+200') # 设置标 ...
- Linux中的环境变量PS1，打造你的专属终端
文章目录 介绍 PS1的格式 设置字体样式 举例 小建议 进阶 介绍 好看的终端是怎么做的呢?通过PS1这个环境变量! PS1的格式 PS1='[\u@\h \w]\$ ' 样式: 解释: [是普通字 ...
- HTTP长连接、短连接、Linux网络优化
无连接 含义:每次传输完数据后就断开连接. 因为早期互联网规模小,并且http具有瞬时性,突发性,服务器同时处理着多个请求.所以采用无连接的方式.以便于腾出资源处理其他请求. 无状态 顺便说一说无状态 ...
- 【动手学深度学习】第五章笔记：层与块、参数管理、自定义层、读写文件、GPU
为了更好的阅读体验,请点击这里 由于本章内容比较少且以后很显然会经常回来翻,因此会写得比较详细. 5.1 层和块 事实证明,研究讨论"比单个层大"但"比整个模型小&quo ...
- Linux驱动中的异步函数（aio_read和aio_write）
Linux驱动中的异步函数(aio_read和aio_write) 我们可以在signal_handler使用了read和write函数处理设备文件的读写操作.然而这两个函数可以分别用aio_read ...
- 信奥一本通1164：digit函数
1164:digit函数 时间限制: 1000 ms 内存限制: 65536 KB 提交数:41504 通过数: 26475 [题目描述] 在程序中定义一函数digit(n,k) ,它能分离出整数n ...
- 基于 tc 指令的网速限制工具
前言 最近有一个需求,需要限制网卡速度进行一些测试.在朋友推荐下阅读了这篇文章 TC简单粗暴限制网速. 经过尝试,简单有效,整理成脚本放在正文,留作参考. 正文 指令解析(chatgpt 分析) 您提 ...
- Ubuntu20.04中 ORBSLAM3的安装和测试
ORBSLAM3 安装以及测试教程(Ubuntu20.04) 1.前期准备工作 1.1安装相关依赖 sudo apt install git cmake gcc g++ mlocate 1.2下载OR ...
- 【SQL】晨光咖啡馆，过滤聚合的微妙碰撞
这天,小悦懒洋洋地步入办公楼下的咖啡馆,意外地与一位男子不期而遇.他显然因前一晚的辛勤工作而略显疲惫,却仍选择早到此地,寻找一丝宁静与放松.他叫逸尘,身姿挺拔,衣着简约而不失格调,晨光下更显英俊不凡, ...
- mysql：Windows修改MySQL数据库密码（修改或忘记密码）
今天练习远程访问数据库时,为了方便访问,就想着把数据库密码改为统一的,以后我们也会经常遇到MySQL需要修改密码的情况,比如密码太简单.忘记密码等等.在这里我就借鉴其他人的方法总结几种修改MySQL密 ...