如何获取 HTML5 画布上点击的坐标?

2024-01-01

我需要获取单击 HTML5 画布元素的位置的 x 和 y 坐标。我对 y 坐标做了以下操作:

 $("#my_canvas").click(function(event) {
        alert(Math.floor(event.clientY-$(this).offset().top));
 });

这给了我看起来正确的 y 坐标。问题是如果你向下滚动,clientY变得更小,因为它似乎正在测量屏幕上的 y 坐标,忽略滚动。所以上面给出了一个负数。

获取 x 和 y 坐标的正确方法是什么?


Use pageY http://api.jquery.com/event.pageY/代替clientY,这样您比较的两个坐标都是相对于文档的:

event.pageY-$(this).offset().top
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何获取 HTML5 画布上点击的坐标? 的相关文章

  • 如何知道 Solr Optimize 何时完成?

    我正在使用 Solr php client 通过 php 与 Solr 进行通信 这段代码触发solr优化命令 solr gt optimize 请问有没有什么方法可以确定优化完成了 这都是因为我的网站上有一个管理页面 我每天必须手动优化
  • 推迟未使用的 CSS

    我有一个关键的 CSS 流程 可以防止页面首屏内容出现无样式内容闪现 FOUC 我陷入了 推迟未使用的 CSS 这一点 Google PageSpeed 见解 灯塔 和 或 Chrome 的性能审核强调了这一点 我已经阅读了其他文章 但它们
  • Rails3-jquery-autocomplete 如果没有可用数据则清除字段

    我正在使用rails3 jquery autocomplete 如果自动完成没有返回结果 是否可以清除自动完成字段的值 我试图阻止用户提交数据库中没有的值 我使用的是旧版本 但我实现了change处理程序autocomplete call
  • 由于运行 Javascript,Firefox 选择下拉列表不断刷新/恢复为默认选项 - AngularJS

    我正在 AngularJS 中构建一个应用程序 但在使用 Firefox 时无法选择下拉菜单 当我单击选择菜单并将鼠标悬停在选项上时 它会将所选选项从光标悬停的选项重置为默认 第一个选项 当选项数量很大时 选择正确的选项变得非常困难 该应用
  • 正则表达式匹配除括号中的单词之外的所有单词 - javascript

    我使用以下正则表达式来匹配所有单词 mystr replace W s g function match p1 index title 请注意 单词可以包含特殊字符 例如德语变音符号 如何匹配除括号内的单词之外的所有单词 如果我有以下字符串
  • 正则表达式问题 - 在字符串中查找数字

    我目前正在使用 JavaScript 从字段中获取字符串 在该字段中通常会有 宽度 56 空隙 67 我需要做的是识别 1 440 范围内的两个数字 并将它们放入两个不同的字段中 字段 1 宽度 字段 2 无效 我已经研究过正则表达式 到目
  • BS3 - img 响应类 - 为什么没有最大高度?

    引导程序 3 包括 img responsive班级 应用这些 css 设置 display block height auto max width 100 为什么没有max height 100 我发现添加这个使得图片的高度也适合 但我不
  • 如何调试使用 Testaulous (Karma) 运行的 Jasmine 规范?

    我有一个具有 Jasmine 规格的小项目 我使用 Testaulous 作为我的测试运行程序 我不明白如何调试应用程序代码或规范代码 当我尝试在 Chrome 开发工具中设置断点时 下次规范运行时不会命中它 因为它每次都会使用新的查询字符
  • chrome.extension.getBackgroundPage() 函数示例

    我正在开发一个需要在后台运行的小型 Chrome 扩展 但是 我知道当我使用弹出窗口时这是不可能的 经过一番阅读后 似乎最好的选择是创建popup js为了运行background js using chrome extension get
  • 量角器检查元素是否不存在

    我在基于角度的网站中有一个设置可以打开和关闭下拉菜单 如果关闭 则不会显示在主页上 对于量角器 我需要检查开关关闭时该元素是否不存在 但是 我不应该陷入 未找到元素 错误 因为它是一组许多测试中的一个 我该怎么做 我曾尝试这样做 expec
  • 设置 D3 力定向图

    致尊敬的读者 我对 javascript 相当陌生 我也遇到过这个问题 我正在尝试实现这个力导向图的修改版本 http mbostock github com d3 ex force html http mbostock github co
  • 如何使用nodejs获取目录中第一个扩展名为.txt的文件?

    我所有文件所在的目录是 usr home jordan 该目录下有很多文件 在目录本身中 但有一个文件以 txt 扩展名命名 使用nodejs和fs 我想将带有txt扩展名的第一个文件 或任何文件 放入 mytxtfilepath 中 我在
  • 将 SVG 下载为 PNG 图像

    我想将 HTML 页面中的 SVG 元素下载为 PNG 格式 我尝试了此操作 但下载了一个空白的 PNG 图像 如何将我的 HTML SVG 下载为 PNG 我用过这个https bl ocks org biovisualize 81878
  • 检测 JavaScript 代码中的拼写错误

    在Python世界中 使用最广泛的静态代码分析工具之一 pylint has a 特别检查 https stackoverflow com questions 27162315 automated docstring and comment
  • ng-show 令人不安的 div 布局 - angularJS

    我在用ng show notesOpened 如果notesOpened 变量为true 则隐藏div 然而 当隐藏时 它会扰乱布局 有没有办法让 ng show 的行为与 css 属性相同visibility hidden 以便被隐藏的
  • 手动渲染 Twig 字符串时禁用 HTML 转义

    我有以下代码将字符串呈现为 HTML 输出 如何阻止它转义 HTML 文本 template who bar params array who gt Foo s twig new Twig Environment new Twig Load
  • HTTPS 网站上的 ShareThis 按钮不可点击

    我已将 共享此 按钮添加到我的安全站点 现在单击它们时会产生错误 下面提到了错误 以前有人遇到过这个问题吗 阻止加载混合活动内容 http w sharethis com button buttons js http w sharethis
  • 使用 JavaScript 和 HTML 打印表情符号

    为什么这有效 p x1f604 p 而这并没有 document getElementById emoji innerHTML String fromCharCode parseInt 1f604 16 JS 术语中的 char 实际上是一
  • 获取鼠标在滚动条上的位置

    当我向下滚动或向上滚动时如何获取鼠标位置 我试过这个 document mousemove function event captureMousePosition event scroll function event xMousePos
  • React 不适用于 Android 4.4.2 Web 视图浏览器

    React 在我的 Android 手机上不起作用 我不认为这是我的代码错误 因为即使我写的唯一内容是 p hello world p 它仍然没有显示 在 chrome 远程吊顶上查看后 这显示了 Map is not defined 以前

随机推荐