鼠标事件

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是底层事件,几乎每次按键时都会触发这些事件。

触摸事件

移动端触摸事件与桌面平台的鼠标事件有两个主要的不同点

  1. 鼠标光标只有一个i额,而触摸点可能有很多
  2. 鼠标光标可以悬停(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事件处理的更多相关文章

  1. canvas事件处理机制

    可以查看demo:http://sandbox.runjs.cn/show/hjb2hzzx(建议查看console查看点击后的改变) 具体原理是每次点击的时候去判断当前的鼠标坐标是属于哪一个路径下的 ...

  2. HTML5 Canvas 的事件处理---转

    DOM是Web前端领域非常重要的组成部分,不仅在处理HTML元素时会用到DOM,图形编程也同样会用到.比如SVG绘图,各种图形都是以DOM节点的形式插入到页面中,这就意味着可以使用DOM方法对图形进行 ...

  3. HTML5小游戏-简单抽奖小游戏

    换了新工作以后,专注前端开发,平常空闲时间也比较多,可以多钻研一下技术,写一下博客.最近在学习canvas,参考网上的slotmachine插件,用canvas实现了一个简单抽奖小游戏.       ...

  4. Canvas 内部元素添加事件处理

    目录 前言 自定义事件 有序数组 元素父类 事件判断 其他 立即执行函数 apply, call, bind addEventListener 传参 调用父类的构造函数 对象检测 isPointInP ...

  5. 【HTML5】Canvas 内部元素添加事件处理

    前言 canvas 没有提供为其内部元素添加事件监听的方法,因此如果要使 canvas 内的元素能够响应事件,需要自己动手实现.实现方法也很简单,首先获得鼠标在 canvas 上的坐标,计算当前坐标在 ...

  6. canvas模糊事件处理

    不知道大家项目中有没有用到canvas时还有时候会出现模糊的情况: 具体推测可能是屏幕改变了,然而canvas的渲染对象并没有跟着一起变: 这里简单介绍个对象,window.devicePixelRa ...

  7. 赠书:HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  8. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  9. canvas刮刮乐效果(pc端&H5、zepto-touchmove)

    一.html <div id="canvasArea" style="width:300px;height:200px;position:relative;&quo ...

随机推荐

  1. linux下使用taskset设置进程cpu绑定不起作用

    自从大规模使用了虚拟化之后,大流量时soft interrupt在某个cpu很高就是个严重的问题,最近一有时间就研究这个问题,如果网卡本身不支持多队列的话,有没有办法缓解这个问题. 一开始使用rps, ...

  2. ASP.NET登录控件login。

    1.Login控件.通常情况下会出现3个核心元素.用户名文本框.密码输入框.提交凭证的按钮. 1>.比较重要的属性:CreateUserText属性:包含站点注册页的链接文本.CreateUse ...

  3. Molecule – 帮助你构建跨平台的 HTML5 游戏

    Molecule 框架由拥有超过五年手机游戏开发经验的游戏开发者开发.由于移动浏览器与实际的 HTML5 规范的兼容性的改进和内部硬件的自然进化,HTML5 手机游戏真正有可能流行起来. 您可能感兴趣 ...

  4. Asp.net Ibatis 增、删、改、查

    好久都没用.net Ibatis配置了 今天给大家分享一下获取它的增.删.改.查. #region 节点类型表 public bool InsertNodeType(NodeType allRevie ...

  5. div,span,p等转换成可编辑

    当前它能够将任意不可编辑的标签(span.div.p...等)转换成可编辑的text input.password.textarea.下拉列表(drop-down list)等标签.你可以利用它的ed ...

  6. jquery实现点击上移到顶部功能(转)

    ---恢复内容开始--- 本文转载自W3CPLUS, jQuery制作go to top按钮 每每看到网友Blog的页面底部或中间有一个按钮回到页面顶部,羡慕死人了,但自己就是做不出这样的效果.后来在 ...

  7. 10本Java经典书目推荐

    本文列出的10本书是我个人非常喜欢的Java书籍,当我有时间的时候,我就会将它们捧在手里阅读.甚至有些书我反复读过很多遍,每次重新读的时候总会有新的收获.因此这些书也是大部分Java程序员喜欢的书籍. ...

  8. JavaScript学习05 定时器

    JavaScript学习05 定时器 定时器1 用以指定在一段特定的时间后执行某段程序. setTimeout(): 格式:[定时器对象名=] setTimeout(“<表达式>”,毫秒) ...

  9. OC NSSet

    OC NSSet 数组的特点: 有序的 Set的特点: 无序的,存储元素无重复(例:set中有两个元素'a' 输出时只输出一个a) NSSet初始化 NSSet * set = [[NSSet all ...

  10. Swift开发第十一篇——Designated、Convenience和Required

    本篇主要讲解 Swift 中 Designated.Convenience和 Required 的使用: 在 OC 中 init 方法是非常不安全的,没人能够保证 init 只被调用一次,也没有人保证 ...