Question

js如何获取canvas标签中自己画的图形的单击事件？ - HTML5技术探讨 -

js如何获取canvas标签中自己画的图形的单击事件？

Answer 1

<div id=cd>
<canvas width="300" height="300" style="border:1px solid #c3c3c3;"></canvas>
</div>
<scripr>
var pp=document.getElementById("cd");
pp.onclick=function(e){
e=e||event;
var x=e.clientX-pp.offsetLeft;//获取点击后x的坐标
var y=e.clientY-pp.offsetTop;//获取点击后y的坐标
alert(x);
alert(y);
}
</scripr>

Answer 2

首先canvas要响应鼠标事件（onmousedown之类）
所有的图形必须要创建相应的对象，来记录他们所在的位置以及大小还有zOrder（层叠位置，在2个对象重叠的时候决定谁在上面），相应的对象放到一个数组里并按zOrder排序
当canvas的鼠标click事件触发后，按照zOrder的顺序来检测鼠标坐标在不在某个对象的区域里，如果在，则调用相应的函数

Answer 3

canvas元素的omclick等事件就可以啊，我不清楚如何获得canvas的坐标，因为我要区分单击的是哪个位置