对 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. [转] 基于Gitlab CI搭建持续集成环境

    [From] https://blog.csdn.net/wGL3k77y9fR1k61T1aS/article/details/78798577 前言 本文是在12月12号迅雷@赵兵在前端早读课第三 ...

  2. c# 闲谈异常处理

    今天在阅读 .net 源码时发现微软对所有使用枚举类型的地方对枚举值进行了检测,在检测不通过时抛出了异常. , )) { throw new InvalidEnumArgumentException( ...

  3. 我的Python升级打怪之路【六】:面向对象(二)

    面向对象的一些相关知识点 一.isinstance(obj,cls) 检查实例obj是否是类cls的对象 class Foo(object): pass obj = Foo() isinstance( ...

  4. PHP发送返回404状态码

    1. 默认的由Apache自动处理的404 修改Aache的配置文件 httpd.conf 中的 ErrorDocument 404 /404.html 或者使用 .htaccess文件,同时有要把 ...

  5. poj 2017 Speed Limit

    Speed Limit Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 17704   Accepted: 12435 Des ...

  6. Java下的i++问题

    在解决一道面试题目时遇到问题. public class Inc { public static void main(String args[]){ Inc inc = new Inc(); int ...

  7. 学习笔记之--认识Xcode中的重要成员:lldb调试器

    之前对lldb调试器了解比较少,平时主要用来打印日志和暂定时用鼠标查看属性数据以及使用p po一些简单的命令语句. 今天看了一些关于lldb的文章,顿时觉得之前对它了解太少了,原来它还有那么多的功能. ...

  8. 另一个C#模拟post请求的例子

    private string returninstallTmnl(AddTmnlInstallParameter model) { string url = ConfigurationSettings ...

  9. 微信小程序准备阶段。(一)

    --知识储备--HTML+JS+CSS (一)下载一个微信web开发工具(后续代码都会写在这里边)附上链接:https://mp.weixin.qq.com/debug/wxadoc/dev/devt ...

  10. ASP.NET MVC4 新手入门教程之八 ---8.向模式中添加验证

    在这本部分会将验证逻辑添加到Movie模式,和你会确保验证规则执行任何时候用户试图创建或编辑使用该应用程序的一部电影. 保持事物的干练性 ASP.NET MVC 的核心设计信条之一是 DRY(”Don ...