html5 canvas 添加事件,一个不错的HTML5 Canvas多层点击事件监听实例

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

代码如下: FgrHTML5中文学习网 - HTML5先行者学习网

FgrHTML5中文学习网 - HTML5先行者学习网

FgrHTML5中文学习网 - HTML5先行者学习网

FgrHTML5中文学习网 - HTML5先行者学习网

Document FgrHTML5中文学习网 - HTML5先行者学习网

.box > canvas { FgrHTML5中文学习网 - HTML5先行者学习网

position: absolute; FgrHTML5中文学习网 - HTML5先行者学习网

} FgrHTML5中文学习网 - HTML5先行者学习网

FgrHTML5中文学习网 - HTML5先行者学习网

FgrHTML5中文学习网 - HTML5先行者学习网

FgrHTML5中文学习网 - HTML5先行者学习网

FgrHTML5中文学习网 - HTML5先行者学习网

FgrHTML5中文学习网 - HTML5先行者学习网

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 && xrect.y1 && y

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[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先行者学习网

FgrHTML5中文学习网 - HTML5先行者学习网

FgrHTML5中文学习网 - HTML5先行者学习网

FgrHTML5中文学习网 - HTML5先行者学习网

FgrHTML5中文学习网 - HTML5先行者学习网

这就是微学网-程序员之家为你提供的"一个不错的HTML5 Canvas多层点击事件监听实例"希望对你有所帮助.本文来自网络，转载请注明出处：http://www.weixuecn.cn/article/6782.html