对 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. (二)Audio子系统之new AudioRecord()(Android4.4)

    在上一篇文章<(一)Audio子系统之AudioRecord.getMinBufferSize>中已经介绍了AudioRecord如何获取最小缓冲区大小,接下来,继续分析AudioReco ...

  2. Windbg双机调试环境配置(Windows7/Windows XP+VirtualBox/VMware+WDK7600)

    简介:Windbg双机调试内核.驱动 下载软件: 下载Windbg(GRMWDK_EN_7600_1.ISO) 下载VirtualBox 5.2/VMware 12 一.安装WDK,这里要提一点的是D ...

  3. $bzoj1011-HNOI2008$ 遥远的行星 其他

    题面描述 直线上\(N\)颗行星,\(X=i\)处有行星\(i\),行星\(j\)受到行星\(i\)的作用力,当且仅当\(i<=A_j\).此时J受到作用力的大小为\(F_{i\to j}=\f ...

  4. gcc 常用命令

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

  5. Python爬虫抓取某音乐网站MP3(下载歌曲、存入Sqlite)

    最近右胳膊受伤,打了石膏在家休息.为了实现之前的想法,就用左手打字.写代码,查资料完成了这个资源小爬虫.网页爬虫, 最主要的是协议分析(必须要弄清楚自己的目的),另外就是要考虑对爬取的数据归类,存储. ...

  6. 【随笔】关于绝对定位absolute相对于父元素定位的问题

    绝对定位absolute的官方定义: 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像该元素 ...

  7. Visual Studio2017中如何让ADO.NET实体数据模型[EntityFramework]支持MariaDB&MySQL数据源

    近期由于工作需要,需要重新修改设计系统的ADO.NET实体数据模型.edmx文件中间,在完成实际中途遇到一些实际使用问题,特此记录. 1. Visual Studio 2017 无法以实体设计模式打开 ...

  8. Java入门系列-16-继承

    这一篇文章教给新手学会使用继承,及理解继承的概念.掌握访问修饰符.掌握 final 关键字的用法. 继承 为什么要使用继承 首先我们先看一下这两个类: public class Teacher { p ...

  9. Firebird SEQUENCE

    Firebird3 以后可以有自增列,也可以类似Oracle.Postgresql手动添加序列,产生新值,灵活操作. 创建序列: INCREMENT ; 修改序列最大值: ; 产生新值: 1. ) f ...

  10. Storm框架入门

    1 Topology构成 和同样是计算框架的Mapreduce相比,Mapreduce集群上运行的是Job,而Storm集群上运行的是Topology.但是Job在运行结束之后会自行结束,Topolo ...