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 ...
随机推荐
- ajax乱码的问题
ajax 乱码情况与原因很多,本文只讲其中之一: 浏览器端正常的数据,用ajax提交到服务器上就乱码了. 当ajax的提交方式是get而不是post时,其所携带的数据不会被字符编码过滤器所拦截(事实上 ...
- linux 安装python
wget https://www.python.org/ftp/python/3.6.0/Python-3.6.0.tgz #下载安装包 tar zxvf Python-3.6.0.tgz #解压 . ...
- es第四篇:Query DSL
Query and filter context Match All Query 最简单的search请求,匹配所有文档,文档的_score值都是1,示例: get twitter/_search{ ...
- Spring Roo 想知道源码,怎么实现自动生成枯燥的有规律的文件
简介 似乎是社区在维护的,不在 Spring 官网的 main projects 列表里,而是在 社区projects 列表里 是工具,不是像Spring Boot 一样的框架 http:// ...
- Git版本回退和撤销修改
版本回退: 在实际工作中,我们会不断对文件进行修改,然后不断提交修改到版本库里,一旦你把文件改乱了,或者误删了文件,还可以从最近的一个commit恢复,然后继续工作,而不是把几个月的工作成果全部丢失. ...
- (转)Apache和Nginx运行原理解析
Apache和Nginx运行原理解析 原文:https://www.server110.com/nginx/201402/6543.html Web服务器 Web服务器也称为WWW(WORLD WID ...
- Js正则Replace方法
JS正则的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\s+)|(\s+$)" ...
- jmeter调试脚本之用户自定义变量
一.用户自定义的变量 用户自定义变量,设置变量名.变量值,就引用变量名执行操作 名称:用户定义变量的描述性名称,显示在左边节点上,并用于命名事务 注释:用户定义变量的注释信息,非必填项 变量名称:定义 ...
- python API url 级联生成
参考了一下公司 python 达人 rpc 接口级联 api 调用 rpc.api.users.list() rpc.api.login(username='',password='') rpc['a ...
- PHP和Java中foreach循环的用法区别
1.foreach语句介绍: ①PHP: foreach 语法结构提供了遍历数组的简单方式.foreach 仅能够应用于数组和对象,如果尝试应用于其他数据类型的变量,或者未初始化的变量将发出错误信息. ...