JavaScirpt 获取canvas中鼠标的坐标

短命女 2022-09-10 02:14 144阅读 0赞

# 代码 #

// 监听点击事件
    canvas.addEventListener("click", function(event) {
        getMousePos(canvas, event);
    });
    
    function getMousePos(canvas, event) {
        //1
        var rect = canvas.getBoundingClientRect();
        //2
        var 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);
    }

# 解析 #

## getBoundingClientRect() ##

这个方法返回的对象有六个属性，如下表：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>top</td> 
   <td>元素上边界距窗口最上边的距离</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>元素左边界距窗口最左边的距离</td> 
  </tr> 
  <tr> 
   <td>bottom</td> 
   <td>元素下边界距窗口最上边的距离</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>元素右边界距窗口最左边的距离</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>元素的宽度</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>元素的高度</td> 
  </tr> 
 </tbody> 
</table>

rect.left \* (canvas.width / rect.width)  
之所以要乘一个(canvas.width / rect.width)，是为了保证画布的像素值和显示在页面上的尺寸不一致的情况下，也能够正确获取到鼠标相对于canvas中的坐标。

附  
画布的像素值和显示在页面上的尺寸不一致的情况

<canvas id="canvasId" width="100" height="100" style="width: 500px;height: 500px;"></canvas>

发表评论取消回复

表情：

评论列表（有 0 条评论，144人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript 获取鼠标点击位置坐标

相对于屏幕如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠标点击事件后，事件screenX，screenY获取的是点击位置相对于屏幕的左边距与上边距，不考虑ifram

迷南。/ 2022年09月30日 06:04/ 0 赞/ 277 阅读

相关 Canvas学习：Canvas里的坐标系统

上一节我们做好了[使用Canvas的准备工作][Canvas]，但并没有深入的介绍如何使用Canvas，比如怎么绘制图形，怎么做Canvas动画等。但并不用着急，随着我们后面的

阳光穿透心脏的1/2处/ 2022年09月30日 04:59/ 0 赞/ 254 阅读

相关 JavaScirpt Canvas画四边形,移动顶点可以改变形状

直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset=

素颜马尾好姑娘i/ 2022年09月10日 02:15/ 0 赞/ 139 阅读

相关 JavaScirpt 获取canvas中鼠标的坐标

代码 // 监听点击事件 canvas.addEventListener("click", function(event) { getMo

短命女/ 2022年09月10日 02:14/ 0 赞/ 145 阅读

相关 canvas之鼠标事件

canvas的鼠标事件无法直接获取鼠标在canvas上的坐标，所获得的坐标是相对于整个屏幕的坐标，所以，想得到鼠标在canvas上的坐标时，就必须进行转换。使用getBou

ゝ一世哀愁。/ 2022年08月13日 04:28/ 0 赞/ 806 阅读

相关 JavaScript 获取鼠标点击位置坐标

对于获取鼠标点击位置的坐标我们经常遇到，但是在不同的浏览器下会有不同的结果，让我们很苦恼；下面做一些简单的总结：相对于屏幕事件screenX，screenY获取的是

墨蓝/ 2022年06月17日 00:15/ 0 赞/ 266 阅读

相关发现：Click事件也能获取鼠标单击的坐标

按照MSDN的说明以及平时的习惯，我们要获取鼠标单击时的相对坐标，都会使用MouseClick等事件，今天，偶然发现，原来Click事件也可以。 ![0_1323507538

清疚/ 2022年06月16日 07:42/ 0 赞/ 219 阅读

相关鼠标事件和坐标获取(窗口坐标和屏幕坐标)

本文主要介绍重写自带的一些方法，拾取屏幕和窗口坐标信息 -------------------- 效果如下： ![这里写图片描述][70] 分析： > 定

梦里梦外;/ 2022年05月25日 03:57/ 0 赞/ 555 阅读

相关 js获取鼠标的坐标

1、JavaScript实现 X:<input id="xxx" type="text" /> Y:<input id="yyy" type="tex

忘是亡心i/ 2022年05月15日 00:56/ 0 赞/ 283 阅读

相关 canvas画布获取定位的坐标位置

方法一： cvs.onclick = function (e) { if (e.offsetX || e.layerX) {

你的名字/ 2022年01月14日 23:07/ 0 赞/ 727 阅读