HTML5 canvas 模拟事件

我们知道在HTML5中的canvas只是一块画布，画布中的内容并没有相应的dom节点响应我们需要的事件来实现我们和用户的交互。那么我们必须要通过模拟来来触发相应的事件。首先我们必须知道鼠标在canvas上点击的是位置：

1 var offset = offset(canvasDom);
2 canvasDom.onclick = function(e){
3     var eventObj = {x:e.pageX-offset.left,y:e.pageY-offset.top,type:'click'};
4    fire(eventObj);
5 } 

这样我们就知道鼠标相对于画布的偏移了，方便我们触发事件。 当然我们要对我们在画布上画的每一个元素进行精确的定位，以及定义层级关系那样才能更加好的实现局部重绘达到我们的目的。

 

这样的事件模型在相对静止的画布游戏应用中可以起到作用。当然我们可以把他应用到子模块上面。我们在画布上画一个模块然后计算出相对子模块的偏移那么我们就可以相对触发子模块里面节点的事件了。

 

canvas 局部重绘游戏 连连看   http://www.laoshu133.com/soom/llk/index.html  就是使用这种事件机制实现的

转载于:https://www.cnblogs.com/soom/archive/2012/06/14/2549702.html