鼠标在画布上的位置

Dagg NabbitSam Lee提出了一个问题:Getting mouse location in canvas,或许与您遇到的问题类似。

回答者Jani Hartikainen给出了该问题的处理方式:

Easiest way is probably to add a onmousemove event listener to the canvas element, and then you can get the coordinates relative to the canvas from the event itself.

This is trivial to accomplish if you only need to support specific browsers, but there are differences between f.ex. Opera and Firefox.

Something like this should work for those two:

function mouseMove(e)
{
    var mouseX, mouseY;

    if(e.offsetX) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    }
    else if(e.layerX) {
        mouseX = e.layerX;
        mouseY = e.layerY;
    }

    /* do something with mouseX/mouseY */
}

希望本文对你有帮助,欢迎支持JavaScript中文网

原文链接:stackoverflow.com

上一篇:如何将一个普通对象为6地图吗?
下一篇:jQuery从字符串中删除特殊字符

相关推荐

  • 鼠标选中文本划词高亮、再次选中划词取消高亮效果

    当我们需要鼠标选中文本后,文本高亮。当再次将选中的文本选中后,取消高亮效果时该如何实现呢? 一、介绍 window.getSelection 获取鼠标选中内容,主要是利用了window.get...

    7 个月前
  • 鼠标跟随炫彩效果

    以前在网上看到了别人这个效果,感觉很酷也很难,但当真的去了解怎么做的时候会发现其实没那么难。用到的就是canvas。 先来看一下效果 可能不是很好看啊。 1.先创建一个canvas(大小、样式自己随...

    2 年前
  • 鼠标经过子元素触发mouseout,mouseover事件的解决方案

    我想实现的目标:当鼠标进入黑色框时,橙色框执行淡入动画;当黑色框范围移动的时候(即使经过粉色框,动画仍然不被触发);当鼠标移出的时候,橙色方块消失。 遇到的问题阐述:当鼠标移入黑色框的时候,橙色框执行...

    4 年前
  • 鼠标移入移出效果 -- jQuery/Vue版

    元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接 实现思路 1、根据鼠标的位置定位在元素内出现的方向 2、根据...

    2 年前
  • 鼠标悬停和MouseEnter事件之间的区别是什么?

    提出了一个问题:What is the difference between the mouseover and mouseenter events?,或许与您遇到的问题类似。

    3 年前
  • 鼠标事件实现拖拽

    为什么需要拖拽 当前的互联网用户早已习惯了拖拽,习惯了拖拽带来的便利。任何一个前端项目都有加入拖拽这个功能的可能性。 拖拽的实现方案 鼠标事件实现 drag and drop api 这两种实现方...

    8 个月前
  • 鼠标 控制 盒子大小 、位置(八角控制流)

    看见项目里用了一个裁图插件,看一了这么一个效果,故此模拟一下 github L6zt 项目地址: https://github.com/L6zt/captu... step 1: npm insta...

    2 年前
  • 需要取消单击/双击事件检测事件时松开鼠标

    IAdapterDaddy Warbox提出了一个问题:Need to cancel click/mouseup events when double-click event detected,或许与...

    3 年前
  • 通过绝对定位元素传递鼠标事件

    s4y提出了一个问题:Pass mouse events through absolutely-positioned element,或许与您遇到的问题类似。 回答者JanD给出了该问题的处理方式: ...

    3 年前
  • 选择元素中的文本(类似于用鼠标高亮)

    Maistrenko VitaliiJason提出了一个问题:Selecting text in an element (akin to highlighting with your mouse),或...

    3 年前

官方社区

扫码加入 JavaScript 社区