对 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. java设计模式学习笔记

    简介 设计模式可以分为五类 接口型 模式:适配器模式,外观模式,合成模式,桥接模式 职责型 模式:单例模式,观察者模式,调停者模式,代理模式,职责链模式,享元模式 构造型 模式:构建者模式,工厂方法模 ...

  2. java转pdf(html转为pdf),解决中文乱码,标签不规范等问题

    第一步,下载jar包以及建对应的文件夹.注意pd4ml的jar要选择pro版本.然后建一个pd4fonts.properties 里面对应的字体. SimSun = simsun.ttf 前面为变量名 ...

  3. n皇后问题(分析)

    这道题需要用到回溯算法,现在在这里先简单的介绍一下这个算法: 回溯算法也叫试探法,它是一种系统地搜索问题的解的方法.回溯算法的基本思想是:从一条路往前走,能进则进,不能进则退回来,换一条路再试.用回溯 ...

  4. CoreJava笔记之JavaBean、静态方法static和final

    记住两句话: 1.属性是静态绑定到变量类型: 2.方法是动态绑定,由最终对象的方法决定 =============================== 关于JavaBean: 1.不是语法规则,是习惯 ...

  5. 案例20-页面使用redis缓存显示类别菜单

    1 准备工作 1  需要导入所需要的jar包. 2 启动windows版本的redis服务端 3 准备JedisUtils工具类的配置文件redis.properties redis.maxIdle= ...

  6. condition实现原理

    condition是对线程进行控制管理的接口,具体实现是AQS的一个内部类ConditionObject,主要功能是控制线程的启/停(这么说并不严格,还要有锁的竞争排队). condition主要方法 ...

  7. 获取两个List中的不同元素,4种方法,逐步优化,学习使用

    完全复制https://www.cnblogs.com/czpblog/archive/2012/08/06/2625794.html 先上测试结果 代码 package com.syl.test; ...

  8. Lucene学习之四:Lucene的索引文件格式(2)

    本文转载自:http://www.cnblogs.com/forfuture1978/archive/2009/12/14/1623599.html  略有删减和补充 四.具体格式 上面曾经交代过,L ...

  9. mongodb基本指令

    MongoDB基本命令用成功启动MongoDB后,再打开一个命令行窗口输入mongo,就可以进行数据库的一些操作. 输入help可以看到基本操作命令: show dbs:显示数据库列表 show co ...

  10. 三:SpringTransaction

    一:什么是事务: 事务逻辑上的一组操作,组成这组操作的各个逻辑单元,要么一起成功,要么一起失败. 二:事务特性(ACID): 原子性(Atomicity) :强调事务的不可分割. 一致性(Consis ...