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 ...
随机推荐
- head first
1, insert 单引号时,使用/转义 2, 不要用NULL, 查找时使用isNull 来判断. 3, 用and / or 连接两个not 时,要写两个NOT 4,delete from tab ...
- python 继承与组合
一.组合 #老师 课程 生日 class Course: def __init__(self,name,period,price): self.name = name self.period = pe ...
- nodejs的process.on('message')转promise
// main.js const cp = require('child_process'); const child = cp.fork('./child.js'); const callbackP ...
- Locust HTTP client
Http client 默认是以安全模式运行的,任何由于连接错误.超时或者类似错误引起的异常,都会返回一个空的Response对象,这个请求将会再locust统计中标记为failure,返回的虚拟对象 ...
- http请求全过程
第一步:浏览器生成http请求信息(第五层) 1.分解url 当用户输入网址时,浏览器会以一定的规则分解网址, 以 http://www.cemabenteng.com/dir/index.html ...
- 转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果
原帖地址 https://www.cnblogs.com/yangjunfei/p/6739683.html 感谢分享 一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度 ...
- 动态时间规整DTW(Dynamic Time Warping )
动态时间规整DTW(Dynamic Time Warping ) 原文:https://blog.csdn.net/raym0ndkwan/article/details/45614813 算法笔记- ...
- CSAPP阅读笔记-变长栈帧,缓冲区溢出攻击-来自第三章3.10的笔记-P192-P204
一.几个关于指针的小知识点: 1. malloc是在堆上动态分配内存,返回的是void *,使用时会配合显式/隐式类型转换,用完后需要用free手动释放. alloca是标准库函数,可以在栈上分配任 ...
- VS2010,VS2012,VS2015等的自动提示不能默认选中的功能解决办法
很简单,只需要按 ctrl+alt+space 即可切换. 蛋疼,我到底为什么总会不小心切换过去,而且每次都记不住这个快捷键切换回来...
- 后台如何通过Request取得多个含有相同name的控件的值?
在Asp.net开发中,所有html控件的值都是可以在服务器端用后台代码的Request[name]来获取其值的.但如果有多个相同name的Html控件提交到后台,怎么分别取各个控件的值呢?而多数情况 ...