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

最新推荐文章于 2023-09-14 14:05:52 发布

转载最新推荐文章于 2023-09-14 14:05:52 发布 · 1.3w 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.cnblogs.com/lunawzh/p/5185462.html

标签

#h5 #canvas #定位

收录于

h5 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了两种获取HTML Canvas元素上点击事件坐标的实用方法。方法一使用了e.offsetX和e.offsetY属性，方法二则通过窗口坐标转换为Canvas坐标，确保了在不同布局和滚动条件下点击位置的准确性。

方法一：

cvs.onclick = function (e) {
    if (e.offsetX || e.layerX) {
           var x = e.offsetX == undefined ? e.layerX : e.offsetX;
           var y = e.offsetY == undefined ? e.layerY : e.offsetY;
   }
}

方法二：

function windowToCanvas(x,y) {
      var cvsbox = cvs.getBoundingClientRect();
      return { x: Math.round(x - cvsbox.left), y: Math.round(y - cvsbox.top) };
}

cvs.onclick = function (e) {
     var clickXY = windowToCanvas(e.clientX, e.clientY);
}