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中 ...
随机推荐
- pygame---制作一只会转弯的小乌龟
Pygame Pygame是跨平台Python模块,专为电子游戏设计,包含图像.声音.建立在SDL基础上,允许实时电子游戏研发而无需被低级语言(如机器语言和汇编语言)束缚. 包含图像.声音. 建立在S ...
- microbiom github reference
https://github.com/SchlossLab https://github.com/crazyhottommy
- 使用putty远程登录Ubuntu时,报Network error:Connection refused错误及解决
putty远程登录Ubuntu,弹出Network error:Connection refused的错误提示框,就是因为Ubuuntu没有安装ssh服务. 执行命令: sudo apt instal ...
- C#中访问私有成员--反射
首先我必须承认访问一个类的私有成员不是什么好做法.大家也都知道私有成员在外部是不能被访问的.而一个类中会存在很多私有成员:如私有字段.私有属性.私有方法.对于私有成员访问,可以套用下面这种非常好的方式 ...
- 优步UBER司机全国各地奖励政策汇总 (3月7日-3月13日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- H5-基础-day01
类选择器和ID选择器 相同点:可以应用于任何元素不同点: 1.ID选择器只能在文档中使用一次.与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次.而类选择器可以使用多次. 2 ...
- webpack中Development和Production模式的区分打包
当我们在开发一个项目的时候,我们一般用development这个环境进行项目的开发,在这个环境下,webpack使用dev-server,帮我们启用一个服务器,然后这个服务器里面还集成了一些,比如hm ...
- python3 小实践(一)——selenium获取的cookie传递
from selenium import webdriver from time import sleep import requests import pickle #获取登录后的cookies c ...
- 前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(下)
第1章.基础篇(下) Abstract: 数据通信.数据存储.动画.音频与视频.canvas.BOM.表单操作.列表操作 数据通信(HTTP协议) HTTP事务: 客户端向服务器端发送HTTP请求报文 ...
- Python全栈 正则表达式(re模块正则接口全方位详解)
re模块是Python的标准库模块 模块正则接口的整体模式 re.compile 返回regetx对象 finditer fullmatch match search 返回 match对象 match ...