对 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. sublime text3 license & nodejs setting

    ----- BEGIN LICENSE ----- sgbteam Single User License EA7E-1153259 8891CBB9 F1513E4F 1A3405C1 A865D5 ...

  2. chromedriver for mac

  3. 第九次 Scrum Meeting

    第九次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/4/14 19:00 60min 新主楼F座2F 附Github仓库:WEDO 例会照片 工作情况总结(4.14) ...

  4. UNIX SHELL基础知识总结(二)

    1. vim,vi及ex的关系 vim不需要安装,vi为ex的“Visual Mode”,Vim是vi的高级版本: 2. Unix Shell 快捷键 Ctrl+a/e将光标定位到 命令的头/尾 Ct ...

  5. SpringCloud---服务容错保护---Spring Cloud Hystrix

    1.概述 1.1 在分布式架构中,存在着许多的服务单元,若一个单元出现故障,很容易因依赖关系引发故障的蔓延,最终导致整个系统的瘫痪: 为了解决这样的问题,产生了断路器等服务保护机制: 1.2 分布式架 ...

  6. LCA(最近公共祖先)

    学习链接:https://baike.baidu.com/item/%E4%BC%B8%E5%B1%95%E6%A0%91/7003945?fr=aladdin 求LCA的方法有很多,在这里就只介绍一 ...

  7. cuda9.0 中不存在libnppi.so

    编译一个caffe版本,报错找不到 -lnppi 发现使用打是cuda9.0, 但是cuda9.0 中不存在libnppi.so. 只好换成cuda8.0.

  8. 那些H5用到的技术(4)——弹幕

    前言思路实现模式无限循环模式时间线模式停止显示弹幕 前言 以前玩卷轴射击游戏的时候,大量的BOSS子弹让我们无路可逃的时候,让我见识到了真正弹幕的威力,可自从A站B站火了之后,大量评论留言参与到了视频 ...

  9. windows 下创建 sqlite 数据库

    说明:windows 下执行创建 sqlite 数据库命令后数据库文件不会马上生成,需要创建表以后才会生成. 1.将 sqlite3.exe 文件放在任何位置(如放在 d:\tools )2.在 CM ...

  10. html锚点(mao dian)--特殊的超链接

    锚点(anchor):其实就是超链接的一种,一种特殊的超链接 普通的超链接,<a href="路径"></a> 是跳转到不同的页面 而锚点,<a hr ...