canvas画布上定位点击位置
两种方法:
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画布上定位点击位置的更多相关文章
- 微信小程序 在canvas画布上划动,页面禁止滑动
要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...
- 前端手势控制图片插件书写三(将transform变化应用在图片和canvas画布上)
注意:transform的scale为负数时,图片会垂直翻转 一.在使用transform将计算得到的变化应用到图片上后,需要考虑到我们每次计算的都是touchmove中本次的差量.在第一次移动过后. ...
- html5 canvas画布上合成
source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...
- 小程序-生成一个小程序码画在canvas画布上生成一张图片分享出去
这个需求我遇到过2次.一次是在识别二维码后跳转到其它页面,另一次是识别二维码后进入到生成小程序码的当前页面. 我有一个梦想,就是成为一名黑客!!!!!! 小程序中js wx.request({ ...
- selenium webdriver 实现Canvas画布自动化测试
https://blog.csdn.net/xiaoguanyusb/article/details/80324210 由借鉴意义, 转过来 canvas 是一个画布,定位元素时只能定位到画布上,如下 ...
- 玩转html5(二)----用canvas结合脚本在画布上画简单的图(html5又一强大功能)
在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字. 在代码中均给出了注释,在这里特别强调的一点是:使用c ...
- 有趣html5(两)----使用canvas结合剧本画在画布上的简单图(html5另一个强大)
请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 于html5中能够使用canvas标签在画布上绘图,先直接上代码,这篇文章先简介一下canvas的用法.简单画几个圆,矩形,三角形,写字. 在 ...
- canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上
canvas 里绘制的图形不是一个实体 DOM,所以要给每个绘制的图形添加事件操作比给 DOM 添加事件要复杂很多. 所以,我们需要使用一个 canvas 的 isPointInPath(x, y) ...
- 问题:asp.net 点击button按钮调到页面顶部;结果:asp.net点击一个按钮,使页面跳转到本面页上的指定位置
asp.net点击一个按钮,使页面跳转到本面页上的指定位置 (2011-04-19 16:46:51) 转载▼ 标签: it 最近在做一个项目. 用到标题所说的功能. 实现方法: 1.在aspx中 ...
随机推荐
- 北京Uber优步司机奖励政策(12月31日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 【机器学习笔记】自组织映射网络(SOM)
什么是自组织映射? 一个特别有趣的无监督系统是基于竞争性学习,其中输出神经元之间竞争激活,结果是在任意时间只有一个神经元被激活.这个激活的神经元被称为胜者神经元(winner-takes-all ne ...
- ORB-SLAM(五)KeyFrameDataBase类
关键帧数据库通过预先训练好的词典,维护一个向量std::vector<list<KeyFrame*> > mvInvertedFile; 该向量中mvInvertedFile[ ...
- Qt-QML-Slider-滑块-Style
感觉滑块这个东西,可以算是一个基本模块了,在我的项目中也有这个模块,今天我将学一下一下滑块的使用以及美化工作. 想学习滑块,那就要先建立一个滑块,新建工程什么的这里就省略了,不会的可以看我前面的几篇文 ...
- WEB安全--高级sql注入,爆错注入,布尔盲注,时间盲注
1.爆错注入 什么情况想能使用报错注入------------页面返回连接错误信息 常用函数 updatexml()if...floorextractvalue updatexml(,concat() ...
- adb获取设备的序列号
用数据线连接手机, 打开开发者模式, 并赋予相关权限, 在CMD命令行输入: adb devices 第一个参数即为设备的序列号, 第二个参数device表示设备的状态是在线.
- Appium最新的服务器初始化参数(Capability)【截止11月29日,后续最新的可以看github】
键 描述 值 automationName 自动化测试的引擎 Appium (默认)或者 Selendroid platformName 使用的手机操作系统 iOS, Android, 或者 Fire ...
- SQL Sever查询语句集锦
一. 简单查询简单的Transact-SQL查询只包括选择列表.FROM子句和WHERE子句.它们分别说明所查询列.查询的表或视图.以及搜索条件等. 例如,下面的语句查询testtable表中姓名为“ ...
- 加油吧 骚年QAQ
本随笔文章,由个人博客(鸟不拉屎)转移至博客园 写于:2017 年 11 月 08 日 原地址:https://niaobulashi.com/archives/fighting.html --- 想 ...
- 树的层次遍历(Trees on the level,UVA 122)
题目描述: 题目思路: 1.用结构链表来建树 2.用队列来实现层次遍历,当遍历到根节点时,将其子节点压入队列 #include <iostream> #include <cstdli ...