HTML5 canvas的模拟事件

---

HTML #canvas #模拟事件2012-06-14 21:36

---

我们知道在HTML5中的canvas只是一块画布，画布中的内容并没有相应的dom节点响应我们需要的事件来实现我们和用户的交互。

那么我们必须要通过模拟来来触发相应的事件。首先我们必须知道鼠标在canvas上点击的是位置：

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

这样我们就知道鼠标相对于画布的偏移了，方便我们触发事件。 当然我们要对我们在画布上画的每一个元素进行精确的定位，以及定义层级关系那样才能更加好的实现局部重绘达到我们的目的。
 
这样的事件模型在相对静止的画布游戏应用中可以起到作用。当然我们可以把他应用到子模块上面。我们在画布上画一个模块然后计算出相对子模块的偏移那么我们就可以相对触发子模块里面节点的事件了。

---

相关文章

• 了解data:image/png;base64是什么 2012/06/02
• 常用HTML5移动应用框架的比较分析 2012/06/02
• QQ客服的HTML代码 2012/05/24
• IE6下fixed解决方法 2012/05/21
• 各浏览器设置HTML元素的透明度 2012/05/20
• web页面入门经验之谈 2012/05/17
• dl dt dd标签用法 2012/04/26
• 手机浏览器禁用缩放 2012/04/26
• XHTML代码常见用法总结 2012/04/23
• 提高网站的访问速度的基本技巧 2012/04/23