两种方法:

1.

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;
}
}

2.

 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);
}

canvas画布上定位点击位置的更多相关文章

  1. 微信小程序 在canvas画布上划动,页面禁止滑动

    要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...

  2. 前端手势控制图片插件书写三(将transform变化应用在图片和canvas画布上)

    注意:transform的scale为负数时,图片会垂直翻转 一.在使用transform将计算得到的变化应用到图片上后,需要考虑到我们每次计算的都是touchmove中本次的差量.在第一次移动过后. ...

  3. html5 canvas画布上合成

    source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...

  4. 小程序-生成一个小程序码画在canvas画布上生成一张图片分享出去

    这个需求我遇到过2次.一次是在识别二维码后跳转到其它页面,另一次是识别二维码后进入到生成小程序码的当前页面. 我有一个梦想,就是成为一名黑客!!!!!! 小程序中js wx.request({     ...

  5. selenium webdriver 实现Canvas画布自动化测试

    https://blog.csdn.net/xiaoguanyusb/article/details/80324210 由借鉴意义, 转过来 canvas 是一个画布,定位元素时只能定位到画布上,如下 ...

  6. 玩转html5(二)----用canvas结合脚本在画布上画简单的图(html5又一强大功能)

    在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字. 在代码中均给出了注释,在这里特别强调的一点是:使用c ...

  7. 有趣html5(两)----使用canvas结合剧本画在画布上的简单图(html5另一个强大)

    请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 于html5中能够使用canvas标签在画布上绘图,先直接上代码,这篇文章先简介一下canvas的用法.简单画几个圆,矩形,三角形,写字. 在 ...

  8. canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上

    canvas 里绘制的图形不是一个实体 DOM,所以要给每个绘制的图形添加事件操作比给 DOM 添加事件要复杂很多. 所以,我们需要使用一个 canvas 的 isPointInPath(x, y) ...

  9. 问题:asp.net 点击button按钮调到页面顶部;结果:asp.net点击一个按钮,使页面跳转到本面页上的指定位置

    asp.net点击一个按钮,使页面跳转到本面页上的指定位置 (2011-04-19 16:46:51) 转载▼ 标签: it   最近在做一个项目. 用到标题所说的功能. 实现方法: 1.在aspx中 ...

随机推荐

  1. IoC 依赖注入容器 Unity

    原文:IoC 依赖注入容器 Unity IoC 是什么? 在软件工程领域,“控制反转(Inversion of Control,缩写为IoC)”是一种编程技术,表述在面向对象编程中,可描述为在编译时静 ...

  2. 【调试】Linux下超强内存检测工具Valgrind

    [调试]Linux下超强内存检测工具Valgrind 内容简介 Valgrind是什么? Valgrind的使用 Valgrind详细教程 1. Valgrind是什么? Valgrind是一套Lin ...

  3. java 中的线程池和线程 调用小demo

    public class Main { public static void main(String[] args) { try { /// ThreadPoolExecutor executor = ...

  4. 【原创】linux命令-Axel命令 - linux多线程下载 - 费元星 - 未来星开发团队

    [费元星版权Q:9715234] Axel 是 Linux 下一个不错的HTTP/FTP高速下载工具.支持多线程下载.断点续[费元星版权Q:9715234]传,且可以从多个地址或者从一个地址的多个连接 ...

  5. 「日常训练」Maximum Multiple(HDU-6298)

    题意与分析 一开始以为是一条高深的数学题,跳过去了,后来查其他题目的代码的时候无意看到,一看emmmmmm 稍微思考一下就有了.\(1=\frac{1}{3}+\frac{1}{3}+\frac{1} ...

  6. 一种新的自动化 UI 测试解决方案 Airtest Project

    今天分享一个自动化UI测试工具airtest——一款网易出品的基于图像识别面向游UI测试的工具,也支持原生Android App基于元素识别的UI自动化测试.主要包含了三部分:Airtest IDE. ...

  7. appium -- 页面出现弹窗,关闭后,无法识别页面元素

    1. 问题:如图所示:在修改手势密码的过程中,点击了返回按钮后,弹出该弹窗:点击继续设置后,就发现 driver.getPageSource()获取不到页面元素.在找了一圈无用的资料后,没有什么好的处 ...

  8. Linux命令应用大词典-第46章 其他命令

    46.1 mkfontdir:创建X字体文件的索引 46.2 dumpiso:转储IEEE 1394同步信道的数据包 46.3 iconv:转换文件编码 46.4 hash:显示和删除哈希表 46.5 ...

  9. 181. Flip Bits【LintCode, by java】

    Description Determine the number of bits required to flip if you want to convert integer n to intege ...

  10. 查找 二叉树中 k1 到 k2区间的节点

    vector<int> res; int key1, key2; void traverse(TreeNode * root){//采用前序遍历 if(root == NULL) retu ...