Canvas事件处理
鼠标事件
canvas.onmousedown = function(e ) {//React to the mouse down event };
canvas.addEventListener('mousedown', function(e ) { //React to the mouse down event});
上面一种方法看起来更简单一些,但是,如果需要向某个鼠标事件注册多个监听器的话,那么用addEventListener()方法会更合适。
浏览器通过事件对象传递给监听器的鼠标坐标,是窗口坐标(window coordinate),而不是相对与canvas自身的坐标。而大部分情况下,开发者需要知道的是发生鼠标事件的点相对于canvas的位置,而不是在整个窗口中的位置,所以有必要进行坐标变换。
function windowToCanvas(canvas, x, y) { var bbox = canvas.getBoundingClientRect();
return { x: x – bbox.left * (canvas.width / bbox.width), y: y – bbox.top * (canvas.height / bbox.height) }; }
上述方法,在canvas对象上调用getBoundingClientRect()方法,来获取canvas元素的边界框,该边界框的坐标是相对于整个窗口的。然后返回一个对象,该对象的x、y属性分别对应于鼠标在canvas之中的坐标。该方法不止是对两个坐标进行平移缩放,在canvas元素大小与绘图表面大小不相符时,它还对这两个坐标进行了缩放。
canvas元素实际上有两套尺寸,一个是元素本身的大小,还有一个是元素绘图表面(drawing surface)的大小。以内联方式设置width和height属性,实际上是同时设置了元素本身的大小与元素绘图表面的大小。然而,如果通过CSS来设定canvas元素的大小,那么只会改变元素本身的大小,而不会影响到绘图表面。
如果css设定的canvas元素大小域其绘图表面大小不同,浏览器就会对绘图表面进行缩放,使其符合元素的大小,类似于设定了图片的宽与高,但是与图片本身尺寸不同,那么,图片会被拉伸一样。
键盘事件
canvas是一个不可获取焦点的元素,所以,在canvas上新增键盘事件监听器是徒劳的。如果想要检测键盘事件的话,你应该在document或window对象上新增键盘事件监听器才对。
keydown
keypress
keyup
keydown与keyup是底层事件,几乎每次按键时都会触发这些事件。
触摸事件
移动端触摸事件与桌面平台的鼠标事件有两个主要的不同点
- 鼠标光标只有一个i额,而触摸点可能有很多
- 鼠标光标可以悬停(hover),而触摸点则不行
处理触摸事件的方式,在许多方面与处理鼠标事件相似,例如
canvas.ontouchstart = function(e ) { alert("touch start"); };
canvas.addEventListener("touchstart", function(e ) { alert("touch start"); });
触摸事件
事件类型 |
是否可以取消 |
是否走完整个冒泡式触发过程 |
描述 |
浏览器对该事件的默认处理方式 |
touchstart |
是 |
是 |
用户将某个触摸点置于触摸界面上 |
未定义 |
touchmouve |
是 |
是 |
在触摸界面上移动触摸点 |
未定义 |
touchend |
是 |
是 |
触摸点离开了触摸区域 |
根据具体情况而定,可能将其视为:mousemove,mousedown、mouseup、click |
touchcancel |
是 |
是 |
触摸点的触摸动作被打断,或是触摸点个数超出了设备所能处理的范围 |
未定义 |
touchevent对象的属性
属性名 |
属性值的数据类型 |
描述 |
touches |
TouchList |
由正在界面上触摸的各个触摸点所组成的列表 |
changedTouches |
TouchList |
与上次触摸事件相比,发生改变的各个触摸点,对于touchstart事件来说,它表示那些刚刚被激活的触摸点。对于touchmove事件来说,表示那些位置发生了移动的触摸点。对于touchend与touchcancel来说,表示那些不再停留于触摸界面之上的触摸点 |
targetTouches |
TouchList |
正在界面上触摸而且位于当前元素范围之内的那些触摸点。除非某个触摸点被拖到了元素范围之外,否则该列表就等同于touches列表 |
altKey ctrlKey metaKey shiftKey |
boolen |
如果在触摸事件发生时,与之对应的按键Alt Ctrl Meta或Shift处于被按下的状态,那么其值就是true,由于某些移动设备并没有物理键盘,所以这些属性的值可能是不确定的。 |
TouchList对象
TouchList对象有两个属性
length
Touch identifiedTouch(identifier)
给定某个TouchList对象,可以可以通过length属性获取列表中所含Touch对象的个数
canvas.ontouchstart = function(e) {alert("e.touches.length + ' touches on the device'); };
可以像操作数组那样,访问TouchList之中的每一个Touch元素
canvas.ontouchstart = function(e) { for var i=0;i<e.touches.length; ++i} { alert("Touch at: " + e.touches[i].pageX + "," + e.touches[i].pageY); } };
Touch对象
触摸事件监听器最终还是需要检查Touch对象本身的属性。
属性名 |
属性值的数据类型 |
描述 |
clientX |
long |
触摸点相对于视窗的X坐标,该值不包含滚动条宽度 |
clientY |
long |
Y坐标,不包含滚动条高度 |
identifier |
long |
代表触摸点身份的独特标识符,同一个触摸点的身份标识符在不同的事件中保持不变 |
pageX |
long |
触摸点相对于视窗的X坐标,包含滚动条的宽度 |
pageY |
long |
相对于视窗的Y坐标,包含滚动条高度 |
screenX |
long |
触摸点相对于屏幕的X坐标 |
screenY |
long |
触摸点相对于屏幕的Y坐标 |
target |
EventTarget |
触摸动作开始时,触摸点所在的元素。就算该点其后被拖出了初始元素,target依然会指向一开始的那个元素。 |
tips:在事件对象上调用preventDefault()方法,可阻止浏览器对该事件采取诸如滚动网页等默认的处理动作。此方法可以避免各种开发者不想看到的浏览器互动操作,如缩放页面、偶然选取了网页内容,以及div闪烁等。
手指缩放
对于类型为touchstart及touchmove的触摸事件,如果发现有两个点同时在触摸设备,而且它们中至少有一个位置发生了变化,那么就判定用户在pinch屏幕。如果程序发现用户正在pinch屏幕,用于处理touchstart事件的方法会计算两个触摸点之间的距离,以及当前放大倍数与该距离的比值。在touchmove事件的方法也会计算当前两个触摸点之间的距离,并且将该值乘以刚才计算好的比值,就可以得到新的放大倍数。
Canvas事件处理的更多相关文章
- canvas事件处理机制
可以查看demo:http://sandbox.runjs.cn/show/hjb2hzzx(建议查看console查看点击后的改变) 具体原理是每次点击的时候去判断当前的鼠标坐标是属于哪一个路径下的 ...
- HTML5 Canvas 的事件处理---转
DOM是Web前端领域非常重要的组成部分,不仅在处理HTML元素时会用到DOM,图形编程也同样会用到.比如SVG绘图,各种图形都是以DOM节点的形式插入到页面中,这就意味着可以使用DOM方法对图形进行 ...
- HTML5小游戏-简单抽奖小游戏
换了新工作以后,专注前端开发,平常空闲时间也比较多,可以多钻研一下技术,写一下博客.最近在学习canvas,参考网上的slotmachine插件,用canvas实现了一个简单抽奖小游戏. ...
- Canvas 内部元素添加事件处理
目录 前言 自定义事件 有序数组 元素父类 事件判断 其他 立即执行函数 apply, call, bind addEventListener 传参 调用父类的构造函数 对象检测 isPointInP ...
- 【HTML5】Canvas 内部元素添加事件处理
前言 canvas 没有提供为其内部元素添加事件监听的方法,因此如果要使 canvas 内的元素能够响应事件,需要自己动手实现.实现方法也很简单,首先获得鼠标在 canvas 上的坐标,计算当前坐标在 ...
- canvas模糊事件处理
不知道大家项目中有没有用到canvas时还有时候会出现模糊的情况: 具体推测可能是屏幕改变了,然而canvas的渲染对象并没有跟着一起变: 这里简单介绍个对象,window.devicePixelRa ...
- 赠书:HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
- HTML5移动开发学习笔记之Canvas基础
1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...
- canvas刮刮乐效果(pc端&H5、zepto-touchmove)
一.html <div id="canvasArea" style="width:300px;height:200px;position:relative;&quo ...
随机推荐
- 正确的前端传后台json方式
DEMO: var data=JSON.stringify({"page": {"pagenow": 1,"pagesize": 20},& ...
- C# 中几个小“陷阱”
每天写代码,偶尔就会有让你抓狂的时候:代码改了千百遍,蓦然回首,Bug就在灯火阑珊处……这里就列举一些容易犯错的几个小地方,以后遇到了其他的,再慢慢添加. 1. 获取程序当前运行路径 情景复现 ...
- 如何在Visual Studio中开发自己的代码生成器插件
Visual Studio是美国微软公司开发的一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具.代码管控工具.集成开发环境(IDE)等等,且所写的目标代码适用于微 ...
- bootstrap深入理解之格子布局
一.源码文件: _grid.scss:格子系统类文件 Mixins/_grid.scss:支持格子系统实现的mixin集合 Mixins/_grid-framework.scss:格子系统实现的核心m ...
- aBowman >>可以运用到自己博客上的小插件
大家进入我的博客会发现页面右边有一只小狗这部分.这个就是我用在上面的 一个小插件.插件网址是:http://abowman.com/google-modules/,这上面有很多的小插件,可以直接运用到 ...
- CRM 2015 快速抓取表单上字段
var table='<table><tr><td>序号</td><td>字段名</td><td>Schema名称& ...
- 使用Python对文档单词进行计数
做hacker.org上面的题目时,遇到了一个题目需要对RFC3280种长度为9的单词进行计数,并找出这些单词中出现次数最多的那个:Didactic Byte RFC3280文档有7000多行,靠人工 ...
- [javascript svg fill stroke stroke-width x1 y1 x2 y2 line stroke-opacity fill-opacity 属性讲解] svg fill stroke stroke-width stroke-opacity fill-opacity line绘制线条属性讲解
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- UILabel用法
// UILabel -> UIView // UILabel用来显示文字内容 //创建一个Label,一般都直接通过initWithFrame确定位置跟大小 UILabel *lb = [[U ...
- tomcat部署java servlet的3种方式
1.将编译好的class文件按照与工程中的package的目录结构一致的文件夹底下 2.将你的servlet封装成 .war(web application archive格式的后缀名) 格式的文档直 ...