JavaScirpt 获取canvas中鼠标的坐标

短命女 2022-09-10 02:14 152阅读 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 条评论，152人围观）

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

相关阅读

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

[JavaScript 获取鼠标点击位置坐标][JavaScript] 在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的浏

我不是女神ヾ/ 2023年07月18日 06:20/ 0 赞/ 27 阅读

相关 javascirpt中的数组比较

一、首先我们定义两个空数组 var arr1=[]; var arr2=[]; function arrCompare(arr1,arr2){

心已赠人/ 2023年02月08日 12:51/ 0 赞/ 8 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 js获取鼠标的坐标

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

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

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

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

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