首页 网络编程 前端制作 数据库 CMS教程 脚本编程 微信开发 小程序开发 服务器

html5

热门: ASP.NET PHP编程 ASP编程 JSP编程

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

来源:未知 发布时间:2017-05-13
点评:写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了,喜欢的朋友可以参考下最近写一个HTML5的游戏框架。今天写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了。以下代码只是一些思想。具体实现肯定不是那么丑陋 FgrHTML5中文学习网 - HTML5先行者学习网

复制代码代码如下: FgrHTML5中文学习网 - HTML5先行者学习网
<!doctype html> FgrHTML5中文学习网 - HTML5先行者学习网
<html lang="en"> FgrHTML5中文学习网 - HTML5先行者学习网
<head> FgrHTML5中文学习网 - HTML5先行者学习网
<meta charset="UTF-8"> FgrHTML5中文学习网 - HTML5先行者学习网
<title>Document</title> FgrHTML5中文学习网 - HTML5先行者学习网
<style type="text/css"> FgrHTML5中文学习网 - HTML5先行者学习网
.box > canvas { FgrHTML5中文学习网 - HTML5先行者学习网
position: absolute; FgrHTML5中文学习网 - HTML5先行者学习网
} FgrHTML5中文学习网 - HTML5先行者学习网
</style> FgrHTML5中文学习网 - HTML5先行者学习网
</head> FgrHTML5中文学习网 - HTML5先行者学习网
<body> FgrHTML5中文学习网 - HTML5先行者学习网
<div class="box"> FgrHTML5中文学习网 - HTML5先行者学习网
<canvas id="layer1" width="200" height="200"></canvas> FgrHTML5中文学习网 - HTML5先行者学习网
<canvas id="layer2" width="500" height="500"></canvas> FgrHTML5中文学习网 - HTML5先行者学习网
</div> FgrHTML5中文学习网 - HTML5先行者学习网
<script type="text/javascript"> FgrHTML5中文学习网 - HTML5先行者学习网
function getRect(obj) { FgrHTML5中文学习网 - HTML5先行者学习网
var x1 = obj.offsetLeft; FgrHTML5中文学习网 - HTML5先行者学习网
var y1 = obj.offsetTop; FgrHTML5中文学习网 - HTML5先行者学习网
var x2 = x1+obj.offsetWidth; FgrHTML5中文学习网 - HTML5先行者学习网
var y2 = y1+obj.offsetHeight; FgrHTML5中文学习网 - HTML5先行者学习网
return { FgrHTML5中文学习网 - HTML5先行者学习网
x1: x1, FgrHTML5中文学习网 - HTML5先行者学习网
y1: y1, FgrHTML5中文学习网 - HTML5先行者学习网
x2: x2, FgrHTML5中文学习网 - HTML5先行者学习网
y2: y2 FgrHTML5中文学习网 - HTML5先行者学习网
}; FgrHTML5中文学习网 - HTML5先行者学习网
} FgrHTML5中文学习网 - HTML5先行者学习网
function inside(x, y, rect) { FgrHTML5中文学习网 - HTML5先行者学习网
if(x>rect.x1 && x<rect.x2 && y>rect.y1 && y<rect.y2) { FgrHTML5中文学习网 - HTML5先行者学习网
return true; FgrHTML5中文学习网 - HTML5先行者学习网
} FgrHTML5中文学习网 - HTML5先行者学习网
else { FgrHTML5中文学习网 - HTML5先行者学习网
return false; FgrHTML5中文学习网 - HTML5先行者学习网
} FgrHTML5中文学习网 - HTML5先行者学习网
} FgrHTML5中文学习网 - HTML5先行者学习网
var trigger = {}; FgrHTML5中文学习网 - HTML5先行者学习网
trigger.list = []; FgrHTML5中文学习网 - HTML5先行者学习网
trigger.listen = function() { FgrHTML5中文学习网 - HTML5先行者学习网
var list = trigger.list; FgrHTML5中文学习网 - HTML5先行者学习网
document.addEventListener('click',function(evt) { FgrHTML5中文学习网 - HTML5先行者学习网
for(var i=0; i<list.length; ++i) { FgrHTML5中文学习网 - HTML5先行者学习网
list[i](evt); FgrHTML5中文学习网 - HTML5先行者学习网
} FgrHTML5中文学习网 - HTML5先行者学习网
}); FgrHTML5中文学习网 - HTML5先行者学习网
}; FgrHTML5中文学习网 - HTML5先行者学习网
trigger.listen(); FgrHTML5中文学习网 - HTML5先行者学习网
var l1 = document.getElementById('layer1'); FgrHTML5中文学习网 - HTML5先行者学习网
var l2 = document.getElementById('layer2'); FgrHTML5中文学习网 - HTML5先行者学习网
var dl1 = function(evt) { FgrHTML5中文学习网 - HTML5先行者学习网
if(inside(evt.clientX, evt.clientY, getRect(l1))) { FgrHTML5中文学习网 - HTML5先行者学习网
console.log('click'); FgrHTML5中文学习网 - HTML5先行者学习网
} FgrHTML5中文学习网 - HTML5先行者学习网
} FgrHTML5中文学习网 - HTML5先行者学习网
trigger.list.push(dl1); FgrHTML5中文学习网 - HTML5先行者学习网
var dl2 = function(evt) { FgrHTML5中文学习网 - HTML5先行者学习网
if(inside(evt.clientX, evt.clientY, getRect(l2))) { FgrHTML5中文学习网 - HTML5先行者学习网
console.log('click2'); FgrHTML5中文学习网 - HTML5先行者学习网
} FgrHTML5中文学习网 - HTML5先行者学习网
} FgrHTML5中文学习网 - HTML5先行者学习网
trigger.list.push(dl2); FgrHTML5中文学习网 - HTML5先行者学习网
</script> FgrHTML5中文学习网 - HTML5先行者学习网
</body> FgrHTML5中文学习网 - HTML5先行者学习网
</html> FgrHTML5中文学习网 - HTML5先行者学习网
FgrHTML5中文学习网 - HTML5先行者学习网
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 微信开发 | 小程序开发 | 服务器 |

程序员学习网,提供最新的微信开发教程,小程序开发教程,网络编程、php教程、asp.net教程、微信公众平台二次开发教程、脚本编程、网页制作、网页设计、网页特效,为站长与网络编程从业者提供学习资料,凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 程序员学习网 版权所有,并保留所有权利。

电脑版 | 移动版