canvas.addEventListener()
对 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()的更多相关文章
- 自己写的HTML5 Canvas + Javascript五子棋
看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...
- canvas刮刮乐效果(pc端&H5、zepto-touchmove)
一.html <div id="canvasArea" style="width:300px;height:200px;position:relative;&quo ...
- 游戏的套路你知道吗? H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
- canvas事件处理机制
可以查看demo:http://sandbox.runjs.cn/show/hjb2hzzx(建议查看console查看点击后的改变) 具体原理是每次点击的时候去判断当前的鼠标坐标是属于哪一个路径下的 ...
- 用Canvas写桌球游戏!!!
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 昨天上班的时候闲着无事,就用Canvas写了个桌球游戏来玩玩....所以就拿这游戏上来水一发.或许对一些刚学canvas的人有帮助. 话说 ...
- canvas 拖拽实现
Canvas 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏,其中的许多对象会被频繁重绘 SVG 不依赖分辨率 支持事件处理器 ...
- HTML5 canvas绘图
HTML5 canvas画图 示例 ------- <!DOCTYPE html> <head> <meta charset="UTF-8"> ...
- canvas转盘抽奖
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...
- canvas内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- TreeSet和TreeMap不能存放重复元素?能不能存放null?
问题一:本来认为TreeMap不能存放重复元素?其实并非如此: 其实一般情况下是不允许存放重复元素的,但是它并非这么死板,在一些情况下是可以存放重复元素的,存了又会有引入其他问题. 问题二:能不能存放 ...
- input标签的按钮效果
https://codepen.io/anon/pen/EOPMNy <div class="row"> <p>Click every input.< ...
- 2019美国大学生数学建模竞赛B题(思路)
建模比赛已经过去三天了,但留校的十多天里,自己的收获与感受依然长存于心.下面的大致流程,很多并没有细化,下面很多情况都是在假设下进行的,比如假设飞机能够来回运送药品,运货无人机就只运货,在最大视距下侦 ...
- JDBC(3)-使用PreparedStatement接口实现增、删、改操作
1.PreparedStatement接口引入 PreparedStatement是Statement的子接口,属于预处理操作,与直接使用Statement不同的是,PreparedStatement ...
- IDEA里如何安装Python插件打造开发环境(图文详解)
前言 python是一种功能强大和适用面很广的开发语言,在大数据应用和机器学习日益流行的年代,python凭借其简洁.易用和可扩展性获得很多用户的支持,近年来使用率高速增长.python环境下,集成了 ...
- Mutex,Monitor,lock,MethodImplAttribute,SynchronizedAttribute的用法差异
1)Mutex:进程之间的同步(互斥量). 2)lock/Monitor……:线程同步.其中lock是Monitor的简化版本(直接生成try{Monitor.Enter(……)}finally{Mo ...
- MySQL操作汇总
这学期学习了数据库系统原理,做了实验,mark一记. T—SQL的简单查询.连接查询 (1)用SQL语句建库.建表并插入记录. 建库: 建表: 插入记录: 查看 (2)修改表结构,包括修改属性列的数据 ...
- 我该不该学习C语言
这几天把c语言过了一遍,基本上算是入门了,常用语法.函数的使用.c语言是比较古老的语言了,很多系统的底层.工业控制软件都是使用C语言编写,过一遍之后觉得c语言屹立不倒是有原因.c程序员有一句话:使用c ...
- mysql 8 root密码重置
亲测有效. https://blog.csdn.net/gupao123456/article/details/80766154
- form表单在发送到服务器时候编码方式
enctype(编码方式):规定了form表单在发送到服务器时候编码方式.有如下的三个值可选: 1.application/x-www-form-urlencoded.默认的编码方式.但是在用文本的传 ...