一个不错的HTML5 Canvas多层点击事件监听实例


Posted in HTML / CSS onApril 29, 2014

最近写一个HTML5的游戏框架。今天写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了。以下代码只是一些思想。具体实现肯定不是那么丑陋

复制代码
代码如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box > canvas {
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<canvas id="layer1" width="200" height="200"></canvas>
<canvas id="layer2" width="500" height="500"></canvas>
</div>
<script type="text/javascript">
function getRect(obj) {
var x1 = obj.offsetLeft;
var y1 = obj.offsetTop;
var x2 = x1+obj.offsetWidth;
var y2 = y1+obj.offsetHeight;
return {
x1: x1,
y1: y1,
x2: x2,
y2: y2
};
}
function inside(x, y, rect) {
if(x>rect.x1 && x<rect.x2 && y>rect.y1 && y<rect.y2) {
return true;
}
else {
return false;
}
}
var trigger = {};
trigger.list = [];
trigger.listen = function() {
var list = trigger.list;
document.addEventListener('click',function(evt) {
for(var i=0; i<list.length; ++i) {
list[i](evt);
}
});
};
trigger.listen();
var l1 = document.getElementById('layer1');
var l2 = document.getElementById('layer2');
var dl1 = function(evt) {
if(inside(evt.clientX, evt.clientY, getRect(l1))) {
console.log('click');
}
}
trigger.list.push(dl1);
var dl2 = function(evt) {
if(inside(evt.clientX, evt.clientY, getRect(l2))) {
console.log('click2');
}
}
trigger.list.push(dl2);
</script>
</body>
</html>
HTML / CSS 相关文章推荐
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 HTML / CSS
HTML5中5个简单实用的API
Apr 28 #HTML / CSS
会走动的图形html5时钟示例
Apr 27 #HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 #HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 #HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 #HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 #HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 #HTML / CSS
You might like
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
php验证手机号码
2015/11/11 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
javascript每日必学之继承
2016/02/23 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
python基础教程之循环介绍
2014/08/29 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
Python实现直播推流效果
2019/11/26 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
优秀教师演讲稿
2014/05/06 职场文书
学生安全责任书范本
2014/07/24 职场文书
安全责任书范文
2014/08/25 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技