javascript - 获取鼠标在 Canvas 中的位置

标签 javascript html canvas

<分区>

有没有办法在 <canvas> 中获取鼠标的位置?标签?我想要相对于 <canvas> 右上角的位置,而不是整个页面。

最佳答案

已接受的答案并非每次都有效。如果您不使用相对位置,属性 offsetX 和 offsetY 可能会产生误导。

您应该使用 Canvas API 中的函数:canvas.getBoundingClientRect()

  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }
  canvas.addEventListener('mousemove', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    console.log('Mouse position: ' + mousePos.x + ',' + mousePos.y);
  }, false);

关于javascript - 获取鼠标在 Canvas 中的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1114465/

相关文章:

android - 如何在 Jetpack Compose 中删除 Canvas 时变得透明,现在我变成了白色?

javascript - Android 上的网络应用滞后

javascript - 如何使用 anchor 标签中的图像作为输入?

javascript - 如何循环遍历数组并在 jquery 中点击类打印出元素?

javascript - AngularJS 的 CSS 偏移增量

android - 在 Canvas 上绘制虚线

javascript - Redux 数据结构

javascript - 监视工厂对象在自定义指令的 Controller 中不起作用

html - 绝对定位不会溢出到另一个div

javascript - 等距 map 上的平滑角色移动