HTML5 canvas 内部元素事件响应
Note: 本文的逻辑主体参考自：http://www.xyhtml5.com/html5-canvas-event-handler.html，但是由于原文有较多小错误且没有最终代码，本文将之改正，添加了一个实例并添加了最终的实现代码，算作改进版吧。
最近做一个项目，需要在页面上画一个小人，然后点击小人的不同部分响应不同的位置。例如，点击左腿，显示“点击的是左腿”，点击右腿，显示“点击的是右腿”。因为项目使用的HTML5，所以理所应当的想到了用canvas来画这个小人，但是发现canvas对象是作为一个整体存在的。也就是说，图形本身实际都是Canvas的一部分，不可单独获取，所以也就无法直接给某个图形增加JavaScript事件。这样，如果想点击小人的左腿，是点击不到的，你点击的是canvas的整个对象。
给Canvas元素绑定事件
”由于事件只能达到Canvas元素这一层，所以，如果想进一步深入，识别点击发生在Canvas内部的哪一个图形上，就需要增加代码来进行处理。基本思路是：给Canvas元素绑定事件，当事件发生时，检查事件对象的位置，然后检查哪些图形覆盖了该位置。例如一个矩形，该矩形覆盖x轴10-110、y轴10-110的范围。只要鼠标点击在这个范围里，就可以视为点击了该矩形，也就可以手动触发矩形需要处理的点击事件。思路其实比较简单，但是实现起来还是稍微有点复杂。不仅要考虑这个判断过程的效率，有些地方还需要重新判断事件类型，设置要重新定义一个Canvas内部的捕获和冒泡机制。”
首先要做的，是给Canvas元素绑定事件，比如Canvas内部某个图形要绑定点击事件，就需要通过Canvas元素代理该事件：
canvas = document.getElementById('myCanvas');
canvas .addEventListener('click', function(e){
//当click时运行
}, false);接下来需要判断事件对象发生的位置，事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标。但是这个属性Opera不支持，Safari也打算移除，所以要做一些兼容写法：
function getEventPosition(ev){
var x, y;
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
return {x: x, y: y};
}现在有了事件对象的坐标位置，下面就要判断Canvas里的图形，有哪些覆盖了这个坐标。Canvas的isPointInPath方法可以判断当前上下文的图形是否覆盖了某个坐标，比如：
canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(10, 10, 100, 100);
ctx.fill();
ctx.isPointInPath(50, 50); //true
ctx.isPointInPath(5, 5); //false接下来增加一个事件判断，就可以判断一个点击事件是否发生在矩形上：
canvas.addEventListener('click', function(e){
p = getEventPosition(e);
if(ctx.isPointInPath(p.x, p.y)){
//点击了矩形
}
}, false);以上就是处理Canvas事件的基本方法，但是上面的代码还有局限，由于isPointInPath方法仅判断当前上下文环境中的路径，所以当Canvas里已经绘制了多个图形时，仅能以最后一个图形的上下文环境来判断事件。例如，如果我们最后画的是右腿，那么我们只能判断是否点击了右腿，而不能判断身体的其他部分——右腿最后画。这种问题的解决方法是：当点击事件发生时，重绘所有图形，每绘制一个就使用isPointInPath方法，判断事件坐标是否在该图形覆盖范围内。
为了实现重绘，先画一个小人，然后当点击的时候再重绘小人，每次画一个部分的时候就检查是否点击了此部分，如果点击了，那么将相应的序号保存起来。以下是整个小人的代码。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
//初始时画小人
window.onload=function() {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
//画左边头
ctx.fillStyle='#1c94c4';
ctx.beginPath();
ctx.arc(105,75,35,Math.PI/2,Math.PI*1.5,false);
ctx.fill();
//画右边头
ctx.beginPath();
ctx.arc(110,75,35,Math.PI*1.5,Math.PI/2,false);
ctx.fill();
//画躯干
ctx.beginPath();
ctx.rect(80,120,55,100);
ctx.fill();
//画左臂
ctx.beginPath();
ctx.rect(25,140,50,20);
ctx.fill();
//画右臂
ctx.beginPath();
ctx.rect(140,140,50,20);
ctx.fill();
//画左腿
ctx.beginPath();
ctx.rect(80,225,20,80);
ctx.fill();
//画右腿
ctx.beginPath();
ctx.rect(115,225,20,80);
ctx.fill();
//添加事件响应
canvas.addEventListener('click', function(e){
p = getEventPosition(e);
reDraw(p,ctx);
}, false);
}
}
//得到点击的坐标
function getEventPosition(ev){
var x, y;
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
}else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
return {x: x, y: y};
}
//重绘
function reDraw(p,ctx){
arr = [
{x:105, y:75, width:Math.PI/2, height:Math.PI*1.5},
{x:110, y:75, width:Math.PI*1.5, height:Math.PI/2},
{x:80, y:120, width:55, height:100},
{x:25, y:140, width:50, height:20},
{x:140, y:140, width:50, height:20},
{x:80, y:225, width:20, height:80},
{x:115, y:225, width:20, height:80}
]
//保存序号的数组，这样，即使一次点多个，也能保存——本例中只能每次点一个
var whichObject = [];
for(var i=0; i < arr.length; i++){
//用圆画头
if(i<2){
ctx.fillStyle='#1c94c4';
ctx.beginPath();
ctx.arc(arr[i].x,arr[i].y,35,arr[i].width,arr[i].height,false);
ctx.fill();
if(p && ctx.isPointInPath(p.x, p.y)){
whichObject.push(i);
//修改点中区域的颜色
ctx.fillStyle='#F39814';
ctx.beginPath();
ctx.arc(arr[i].x,arr[i].y,35,arr[i].width,arr[i].height,false);
ctx.fill();
}
//用矩形画躯干
}else{
ctx.fillStyle='#1c94c4';
ctx.beginPath();
ctx.rect(arr[i].x,arr[i].y, arr[i].width,arr[i].height);
ctx.fill();
if(p && ctx.isPointInPath(p.x, p.y)){
whichObject.push(i);
ctx.fillStyle='#F39814';
ctx.beginPath();
ctx.rect(arr[i].x,arr[i].y, arr[i].width,arr[i].height);
ctx.fill();
}
}
}
//显示点击了哪个部分
//alert("click:" + whichObject[0]);
}
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvas" width="600" height="500" style="border: 5px blue solid"></canvas>
<br /><br />
</div>
</body>
</html>另：推荐几个快速学习canvas的网址：
Canvas教程：https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial
使用html5 canvas绘制精美图形：http://www.ibm.com/developerworks/cn/web/wa-html5canvas/
Canvas图形事件的另一个实例：http://bbs.blueidea.com/thread-2979405-1-1.html