鼠标事件

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. Android 手机卫士5--手机防盗

    1,界面介绍 跳转到导航界面的第1个,描述功能 跳转到导航界面的第2个,必须,绑定sim卡,才可以跳转到第三个界面跳转到导航界面的第3个,必须输入电话号码,(两种途径(1,输入2,选择))跳转到导航界 ...

  2. GJM : 安装SqlServer遇到问题的解决方案 [原创]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  3. 今天做项目时,用到了好多关于js的知识点,有的忘记了,然后晚上回来自己整理一番,明天继续整理。哈哈,分享给大家。

    javascript 数据类型 typeof (直接量/变量)-------判断数据类型 简单数据类型(栈,空间小,速度快) string字符串 用引号引起来的文本 number数字 所有数字 NaN ...

  4. 6to5 – 让你即刻体验 ECMAScript 6 编程

    ECMAScript 6 是下一代的 ECMAScript 标准.ECMAScript 6 的目标是让 JavaScript 可以用来编写复杂的应用程序.函数库和代码的自动生成器. ES6 是这门语言 ...

  5. 15款免费的响应式 WordPress 主题下载

    响应式设计主题最适合杂志网站,博客网站,想要在自己网站上展示自己作品的用户.支持视网膜显示使其在 iPad,iPhone,Mackbook,iMac 等设备上有更高的分辨率. 响应式和现代设计风格的多 ...

  6. HTML5 Maker – 在线轻松制作 HTML5 动画效果

    HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...

  7. Vue.js——60分钟快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

  8. xwamp 目录结构设计

    xwamp 目录结构设计原文来自:http://www.xwamp.com/make/directory-structure. 目录说明 所有程序都统一放在D盘下的xwamp目录. 目录列表 Apac ...

  9. JS去掉首尾空格 简单方法大全(原生正则jquery)

    JS去掉首尾空格 简单方法大全 var osfipin= ' http://www.cnblogs.com/osfipin/ '; //去除首尾空格 osfipin.replace(/(^\s*)|( ...

  10. 避开unity的坑(转摘)

    避开unity的坑(转摘) 以下总结一部分来自经验之谈,一部分来自其他人的分享.总的来讲,unity开发原型和效果.验证想法,确实是无比便利.可能一个月就把核心玩法做得差不多.强大的编辑器功能让我们也 ...