html 获取鼠标在canvas上的坐标,html5-canvas 检测鼠标在画布上的位置

示例

本示例将说明如何获取鼠标相对于画布的位置,例如(0,0)HTML5 Canvas的左上角。的e.clientX和e.clientY将获得相对于文档的顶部位置的鼠标,来改变这种是基于画布的顶部,我们减去left,并right从客户端X和Y的画布位置

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.font = "16px Arial";

canvas.addEventListener("mousemove", function(e) {

var cRect = canvas.getBoundingClientRect();        // 获取CSS pos,以及宽度/高度

var canvasX = Math.round(e.clientX - cRect.left);  // 减去画布的“左”

var canvasY = Math.round(e.clientY - cRect.top);   // 从X / Y位置

ctx.clearRect(0, 0, canvas.width, canvas.height);  // (0,0)画布的左上方

ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);

});

可运行的例子

之所以使用,Math.round是因为要确保x,y位置为整数,因为画布的边界矩形可能没有整数位置。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/471341.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 2130. 链表最大孪生和(链表快慢指针+反转链表+双指针)

文章目录1. 题目2. 解题1. 题目 在一个大小为 n 且 n 为 偶数 的链表中&#xff0c;对于 0 < i < (n / 2) - 1 的 i &#xff0c;第 i 个节点&#xff08;下标从 0 开始&#xff09;的孪生节点为第 (n-1-i) 个节点 。 比方说&#xff0c;n 4 那么节点 0 是节点 3 的孪…

Splay初步【bzoj1503】

做了一道水题&#xff0c;把bzoj1503用Splay重新写了一下。 1 #include <bits/stdc.h>2 #define rep(i, a, b) for (int i a; i < b; i)3 #define REP(i, a, b) for (int i a; i < b; i)4 #define drep(i, a, b) for (int i a; i > b; i--)5 #define mp make…

原生html5时间组件,JFinal遇到了原生Html5时间组件格式转换问题怎么处理?

今天JBolt种子用户群里有人提问&#xff0c;JFinal针对原生Html5的日期时间选择组件的格式转换支持有问题&#xff0c;报错。于是我在JBolt的Demo中加入了这些去测试一下&#xff0c;这里使用的都是原生Html组件。Input type“text”默认就是一个简单的单行文本输入框。如果修改…

LeetCode 2131. 连接两字母单词得到的最长回文串

文章目录1. 题目2. 解题1. 题目 给你一个字符串数组 words 。words 中每个元素都是一个包含 两个 小写英文字母的单词。 请你从 words 中选择一些元素并按 任意顺序 连接它们&#xff0c;并得到一个 尽可能长的回文串 。每个元素 至多 只能使用一次。 请你返回你能得到的最长…

十、关于MySQL 标识列,你该了解这些!

标识列: 又称为自增长列 含义&#xff1a;可以不用手动的插入值&#xff0c;系统提供默认的序列值 特点&#xff1a; 1、标识列必须和主键搭配吗&#xff1f;不一定&#xff0c;但要求是一个key 2、一个表可以有几个标识列&#xff1f;至多一个&#xff01; 3、标识列的类型只…

svg defs 进行定义 引用

svg defs 进行定义 引用&#xff1a; <% page language"java" contentType"text/html; charsetUTF-8" pageEncoding"UTF-8"%> <%String path request.getContextPath();String basePath request.getScheme() "://" reque…

LeetCode 2132. 用邮票贴满网格图(DP/二维差分)

文章目录1. 题目2. 解题1. 题目 给你一个 m x n 的二进制矩阵 grid &#xff0c;每个格子要么为 0 &#xff08;空&#xff09;要么为 1 &#xff08;被占据&#xff09;。 给你邮票的尺寸为 stampHeight x stampWidth 。我们想将邮票贴进二进制矩阵中&#xff0c;且满足以下…

blue html中转换,BlueFox Free PDF to HTML Converter(PDF文件转换软件)

BlueFox Free PDF to HTML Converter是一款pdf文件转换软件&#xff0c;能直接查看PDF文件和对PDF文件进行编辑&#xff0c;支持批量进行转换&#xff0c;使用非常方便&#xff0c;操作简单&#xff0c;有需要可以下载。软件特色通过将PDF转换为HTML网页&#xff0c;您的网站访…

二、前端pink老师的CSS定位学习笔记(超详细,简单易懂)

定位(position) 1. CSS 布局的三种机制 网页布局的核心 —— 就是用 CSS 来摆放盒子位置。 CSS 提供了 3 种机制来设置盒子的摆放位置&#xff0c;分别是普通流、浮动和定位&#xff0c;其中&#xff1a; 普通流&#xff08;标准流&#xff09; 浮动 让盒子从普通流中浮起来 …

高可用+负载均衡 方案

高可用:keepalived / HeartBeat 负载: LVS / Haproxy 浅谈web应用的负载均衡、集群、高可用(HA)解决方案 《构建高性能web站点》笔记--基础架构篇 高可用可伸缩架构实用经验谈 amoeba是一个以MySQL为底层数据存储&#xff0c;并对应用提供MySQL协议接口的proxy。它集中地响应应…

LeetCode 2133. 检查是否每一行每一列都包含全部整数

文章目录1. 题目2. 解题1. 题目 对一个大小为 n x n 的矩阵而言&#xff0c;如果其每一行和每一列都包含从 1 到 n 的 全部 整数&#xff08;含 1 和 n&#xff09;&#xff0c;则认为该矩阵是一个 有效 矩阵。 给你一个大小为 n x n 的整数矩阵 matrix &#xff0c;请你判断…

上传图片自动加水印html,html5上传多个文件并添加水印 实例源码

【实例简介】【实例截图】【核心代码】html5上传多个文件并添加水印body{font-size:12px;}a{text-decoration:none;}a,a:after{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;}a.btn i{display:block;width:100%;height:100%;position:relative;z…

三、关于网页布局你该知道这些!(布局总结:标准流、浮动、定位)

一个完整的网页&#xff0c;是标准流、浮动、定位一起完成布局的&#xff0c;三者都有自己专门的用法。 标准流 可以让盒子上下排列喝着左右排列&#xff0c;垂直的块级盒子显示就用标准流布局。浮动 可以让多个块级元素一行显示或者左右对齐盒子&#xff0c;多个块级盒子水平…

LoadRunner培训初级教程

一 LoadRunner简介 1.1 Loadrunner介绍 LoadRunner 是 HP Mercury Interactive用来测试应用程序性能的工具 LoadRunner 通过模拟一个多用户并行工作的环境来对应用程序进行负载测试。通过使用最少的硬件资源&#xff0c;这些虚拟用户提供一致的、可重复并可度量的负载&#xf…

android model 设计,Android model层设计

model层在开发app的过程中&#xff0c;不管是使用了mvp还是mvc甚至mvvm模式,model层的设计基本都是一样的&#xff0c;model层可以被称为数据层&#xff0c;它的主要任务就是为上层提供各种的数据服务&#xff0c;上层完全不需要关心这些数据是来自网络&#xff0c;还是内存&am…

LeetCode 2134. 最少交换次数来组合所有的 1 II(数组*2 + 滑动窗口)

文章目录1. 题目2. 解题1. 题目 交换 定义为选中一个数组中的两个 互不相同 的位置并交换二者的值。 环形 数组是一个数组&#xff0c;可以认为 第一个 元素和 最后一个 元素 相邻 。 给你一个 二进制环形 数组 nums &#xff0c;返回在 任意位置 将数组中的所有 1 聚集在一…

四、pink老师的学习笔记——元素的显示与隐藏

1. 元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 类似网站广告&#xff0c;当我们点击关闭就不见了&#xff0c;但是我们重新刷新页面&#xff0c;会重新出现&#xff01; 1.1 display 显示&#xff08;重点&#xff09; display 设置或检索对象是否及如…

SpringMVC详解

来源&#xff1a;Sunnier&#xff08;http://www.admin10000.com/document/6436.html&#xff09; 一、SpringMVC基础入门&#xff0c;创建一个HelloWorld程序 1.首先&#xff0c;导入SpringMVC需要的jar包。 2.添加Web.xml配置文件中关于SpringMVC的配置 12345678910111213141…

html写学生信息管理,vue实现简单学生信息管理案例

学生信息管理#app{margin: 10px;}学号&#xff1a;姓名&#xff1a;搜索姓名关键字&#xff1a;学号姓名添加时间操作{{item.stuNo}}{{item.name}}{{item.cTime | dateFormat}}删除// 自定义自动获取焦点的全局指令Vue.directive(focus,{// 当被绑定的元素插入到 DOM 中时……i…

LeetCode 2135. 统计追加字母可以获得的单词数(位运算+哈希)

文章目录1. 题目2. 解题1. 题目 给你两个下标从 0 开始的字符串数组 startWords 和 targetWords 。每个字符串都仅由 小写英文字母 组成。 对于 targetWords 中的每个字符串&#xff0c;检查是否能够从 startWords 中选出一个字符串&#xff0c;执行一次 转换操作 &#xff0…