canvas获取鼠标轨迹相对坐标

canvas绑定事件的时候，获得鼠标点击的地方在canvas画布内的坐标的方法。

var x = event.clientX - canvas.getBoundingClientRect().left;
var y = event.clientY - canvas.getBoundingClientRect().top;
复制代码

详细方法：

// 监听点击事件
canvas.addEventListener("click", function(event) {getMousePos(canvas, event);
});function getMousePos(canvas, event) {//1var rect = canvas.getBoundingClientRect();//2var x = event.clientX - rect.left * (canvas.width / rect.width);var y = event.clientY - rect.top * (canvas.height / rect.height);console.log("x:"+x+",y:"+y);
}复制代码

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

转载于:https://juejin.im/post/5bacf7e0e51d450e98750357

canvas获取鼠标轨迹相对坐标相关推荐

php 获取鼠标的坐标,如何实时获取鼠标的当前坐标-
本文来做一个简单的实时获取鼠标坐标的功能,在canvas动画开发中,获取鼠标的坐标,键盘的按键等等,都是常用的操作,我们就慢慢得把他们封装成一个公共库. 一.事件的兼容:function bindEv ...
Java 获取鼠标点击坐标
Java 窗体的使用,获取鼠标右键点击的坐标,其中使用了匿名内部类 import java.awt.FlowLayout; import java.awt.event.MouseAdapter; im ...
js获取鼠标点击坐标
转载自:http://www.cnblogs.com/dolphinX/archive/2012/10/09/2717119.html 在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经 ...
python获取鼠标的当前坐标
安装 pip3 install pyautogui PyAutoGUI是一个纯Python的GUI自动化工具,其目的是可以用程序自动控制鼠标和键盘操作,多平台支持(Windows,OS X,Linux ...
小鱼征服鼠标宏—第一天—获取鼠标x,y坐标实时动态
学了Java 想自己做一些东西,先对鼠标宏开始下手. 首先,要获取实时动态,我最开想到的是用while死循环,这样他一直运行,一直能够获取. public class getMouseLocation ...
php 获取鼠标轨迹,记录鼠标的轨迹并回放的js代码_javascript技巧
遇到的问题: Question ①:mousemove事件中,移动方法中会被记录很多的left和top,我只需要大概的几组数据就行,不需要那么多: Question ②:回放的时候,在for循环里执行 ...
大数据挑战赛-鼠标轨迹识别
声明:本文属于原创,如想转载,请务必在抬头注明出处. 大数据挑战赛-鼠标轨迹识别,竞赛官网:http://bdc.saikr.com/c/cql/34541 1.我们看一下整个竞赛的详情赛题描述鼠 ...
JavaScript获取鼠标控制权
如果使用HTML5开发游戏或者VR博物馆之类的应用,常常需要获取鼠标的控制权,也就是说简单地通过鼠标的移动来控制视角的旋转. 直接使用监听mousemove事件是不可行的,因为当鼠标移动到浏览器或元素 ...
判断鼠标移入移出方向（二）-----获取鼠标移入方向
第二部分内容,这里也列出思路,方便承接第一部分. 思路 1:给li绑定鼠标移入移出事件 2:获取鼠标移入的位置(有用),例:(x,y) 3:获取图片距离浏览器的位置(有用),top,left,heig ...

canvas获取鼠标轨迹相对坐标

canvas获取鼠标轨迹相对坐标相关推荐

最新文章

热门文章