对 canvas 元素的事件监听用addEventListener()实现,

但是有一点缺陷是:canvas 不支持键盘事件,为了解决这个问题,可以采用以下两种方案:

方案一: key event ---- use window as object

  通过window对象实现对canvas事件的监听和处理

  window.addEventListener('keydown', doKeyDown, true);

注:扩大的事件触发的执行对象,可以通过取 canvas 元素的第一级父元素取代 window 对象

方案二:key event ----- use DOM element as object

  通过在 canvas 元素上添加其它支持键盘事件的DOM元素属性,实现键盘事件支持,如使用 H5 的标签属性 tabindex

  <canvas id='canvas' width='300' height='300' tabindex='-1'></canvas>

  canvas.addEventListener('keydown', doKeyDown, true);

注:几乎所有浏览器均支持tabindex,除了 Safari,此为方案二的不足之处

canvas.addEventListener()的更多相关文章

  1. 自己写的HTML5 Canvas + Javascript五子棋

    看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...

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

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

  3. 游戏的套路你知道吗? H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  4. canvas事件处理机制

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

  5. 用Canvas写桌球游戏!!!

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 昨天上班的时候闲着无事,就用Canvas写了个桌球游戏来玩玩....所以就拿这游戏上来水一发.或许对一些刚学canvas的人有帮助. 话说 ...

  6. canvas 拖拽实现

    Canvas 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏,其中的许多对象会被频繁重绘 SVG 不依赖分辨率 支持事件处理器 ...

  7. HTML5 canvas绘图

    HTML5 canvas画图 示例 ------- <!DOCTYPE html> <head> <meta charset="UTF-8"> ...

  8. canvas转盘抽奖

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...

  9. canvas内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Hive优化-大表join大表优化

    Hive优化-大表join大表优化 5.大表join大表优化 如果Hive优化实战2中mapjoin中小表dim_seller很大呢?比如超过了1GB大小?这种就是大表join大表的问题.首先引入一个 ...

  2. 前端cookie、localStorage、sessionStorage缓存技术总结

    转载自:https://www.cnblogs.com/belove8013/p/8134067.html 1.Cookie JavaScript是运行在客户端的脚本,因此一般是不能够设置Sessio ...

  3. gcc 常用命令

    gcc编译器 $ gcc -o XX.exe XXX.c ddd.c $ gcc -o XX.asm -S XXX.c  编译生成可执行文件,并执行程序,缺省的时候,gcc 编译出来的文件是a.out ...

  4. OpenCV Intro - Perspective Transform

    透视变换(Perspective Transformation)是将图片投影到一个新的视平面(Viewing Plane),也称作投影映射(Projective Mapping).通用的变换公式为: ...

  5. (转)haproxy启动故障:Starting proxy:cannot bind socke

    haproxy启动时提示失败: [ALERT] 164/110030 (11606) : Starting proxy linuxyw.com: cannot bind socket 这个问题,其实就 ...

  6. Oracle 通过数据字典查询系统信息

    简介:数据字典记录了数据库系统的信息,他是只读表和视图的集合,数据字典的所有者是sys用户.注:用户只能在数据字典上执行查询操作,而维护和修改是由系统自己完成的. 1.数据字典的组成:数据字典包括数据 ...

  7. HtmlUnit 开发网络爬虫

    网络爬虫第一个要面临的问题,就是如何抓取网页,抓取其实很容易,没你想的那么复杂,一个开源HtmlUnit包,几行代码就OK啦! 通常在一个页面中会包含别的Url,在别的Url当中又会包含更多的Url. ...

  8. orcale 之 存储过程

    之前我们学习过 PL/SQL, 那么当我们的工作中我们通过 PL/SQL 做很多的事情,那么有一个问题,在每次的座同样一件事的时候是不是都需要重新通过 PL/SQL 去完成呢?可不可以只写一次然后,在 ...

  9. oracle系统包——dbms_random用法

    oracle中随机数的包的源文件目录:{oracle_home}\rdbms\admin\dbmsrand.sql 1.返回0~1间的随机数(包括0和1)sql> select dbms_ran ...

  10. BNU44583——Star Trek: First Contact——————【01背包】

    H. Star Trek: First Contact Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld  ...