HTML5 Canvas的事件处理介绍

DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行操作。比如有一个元素，可以直接用jquery增加click事件$('#p1').click(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体，图形本身实际都是Canvas的一部分，不可单独获取，所以也就无法直接给某个图形增加javaScript事件。

　　Canvas的限制

　　在Canvas里，所有图形都绘制在帧上，绘制方法不会将绘制好的图形元素作为一个返回值输出，js也无法获取到已经绘制好的图形元素。比如：

　　代码如下:

　　cvs = document.getElementById('mycanvas');

　　ctx = canvas.getContext('2d');

　　theRect = ctx.rect(10, 10, 100, 100);

　　ctx.stroke();

　　console.log(theRect); //undefined

　　这段代码在canvas标签里绘制了一个矩形，首先可以看到绘制图形的rect方法没有返回值。如果打开浏览器的开发者工具，还可以看到canvas标签内部没有增加任何内容，而在js里获取到的canvas元素以及当前的上下文，也都没有任何表示新增图形的内容。

　　所以，前端常用的dom方法在canvas里是不适用的。比如点击上面Canvas里的矩形，实际点击的是整个Canvas元素。

　　给Canvas元素绑定事件

　　由于事件只能达到Canvas元素这一层，所以，如果想进一步深入，识别点击发生在Canvas内部的哪一个图形上，就需要增加代码来进行处理。基本思路是：给Canvas元素绑定事件，当事件发生时，检查事件对象的位置，然后检查哪些图形覆盖了该位置。比如上面的例子里画过一个矩形，该矩形覆盖x轴10-110、y轴10-110的范围。只要鼠标点击在这个范围里，就可以视为点击了该矩形，也就可以手动触发矩形需要处理的点击事件。思路其实比较简单，但是实现起来还是稍微有点复杂。不仅要考虑这个判断过程的效率，有些地方还需要重新判断事件类型，设置要重新定义一个Canvas内部的捕获和冒泡机制。

　　首先要做的，是给Canvas元素绑定事件，比如Canvas内部某个图形要绑定点击事件，就需要通过Canvas元素代理该事件：

　　代码如下:

　　cvs = document.getElementById('mycanvas');

　　cvs.addEventListener('click', function(e){

　　//...

　　}, 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元素的position设为absolute。

　　现在有了事件对象的坐标位置，下面就要判断Canvas里的图形，有哪些覆盖了这个坐标。

　　isPointInPath方法

　　Canvas的isPointInPath方法可以判断当前上下文的图形是否覆盖了某个坐标，比如：

　　代码如下:

　　cvs = document.getElementById('mycanvas');

　　ctx = canvas.getContext('2d');

　　ctx.rect(10, 10, 100, 100);

　　ctx.stroke();

　　ctx.isPointInPath(50, 50); //true

　　ctx.isPointInPath(5, 5); //false

　　接下来增加一个事件判断，就可以判断一个点击事件是否发生在矩形上：

　　代码如下:

　　cvs.addEventListener('click', function(e){

　　p = getEventPosition(e);

　　if(ctx.isPointInPath(p.x, p.y)){

　　//点击了矩形

　　}

　　}, false);

　　以上就是处理Canvas事件的基本方法，但是上面的代码还有局限，由于isPointInPath方法仅判断当前上下文环境中的路径，所以当Canvas里已经绘制了多个图形时，仅能以最后一个图形的上下文环境来判断事件，比如：

　　代码如下:

　　cvs = document.getElementById('mycanvas');

　　ctx = canvas.getContext('2d');

　　ctx.beginPath();

　　ctx.rect(10, 10, 100, 100);

　　ctx.stroke();

　　ctx.isPointInPath(20, 20); //true

　　ctx.beginPath();

　　ctx.rect(110, 110, 100, 100);

　　ctx.stroke();

　　ctx.isPointInPath(150, 150); //true

　　ctx.isPointInPath(20, 20); //false

　　从上面这段代码可以看到，isPointInPath方法仅能识别当前上下文环境里的图形路径，而之前绘制的路径，无法回溯判断。这种问题的解决方法是：当点击事件发生时，重绘所有图形，每绘制一个就使用isPointInPath方法，判断事件坐标是否在该图形覆盖范围内。

　　循环重绘和事件冒泡

　　为了实现循环重绘，所以就要将图形的基本参数事先保存下来：

　　代码如下:

　　arr = [

　　{x:10, y:10, width:100, height:100},

　　{x:110, y:110, width:100, height:100}

　　];

　　cvs = document.getElementById('mycanvas');

　　ctx = canvas.getContext('2d');

　　draw();

　　function draw(){

　　ctx.clearRech(0, 0, cvs.width, cvs.height);

　　arr.forEach(function(v){

　　ctx.beginPath();

　　ctx.rect(v.x, v.y, v.width, v.height);

　　ctx.stroke();

　　});

　　}

　　上面的代码事先将两个矩形的基本参数保存下来，每次调用draw方法，就会循环调用这些基本参数，用于绘制两个矩形。这里还使用了clearRect方法，用于在重绘时清空画布。接下来要做的是增加事件代理，以及在重绘时对每一个上下文环境使用isPointInPath方法：

　　代码如下:

　　cvs.addEventListener('click', function(e){

　　p = getEventPosition(e);

　　draw(p);

　　}, false);

　　事件发生时，将事件对象的坐标传给draw方法处理。这里还需要对draw方法做一些小改动：

　　代码如下:

　　function draw(p){

　　var who = [];

　　ctx.clearRech(0, 0, cvs.width, cvs.height);

　　arr.forEach(function(v, i){

　　ctx.beginPath();

　　ctx.rect(v.x, v.y, v.width, v.height);

　　ctx.stroke();

　　if(p && ctx.isPointInPath(p.x, p.y)){

　　//如果传入了事件坐标，就用isPointInPath判断一下

　　//如果当前环境覆盖了该坐标，就将当前环境的index值放到数组里

　　who.push(i);

　　}

　　});

　　//根据数组中的index值，可以到arr数组中找到相应的元素。

　　return who;

　　}

　　在上面代码中，点击事件发生时draw方法会执行一次重绘，并在重绘过程中检查每一个图形是否覆盖了事件坐标，如果判断为真，则视为点击了该图形，并将该图形的index值放入数组，最后将数组作为draw方法的返回值。在这种处理机制下，如果Canvas里有N个图形，它们有一部分是重叠的，而点击事件恰巧发生在这个重叠区域上，那么draw方法的返回数组里会有N个成员。这时就有点类似事件冒泡的情况，数组的最后一个成员处于Canvas最上层，而第一个成员则在最下层，我们可以视为最上层的成员是e.target，而其他成员则是冒泡过程中传递到的节点。当然这只是最简单的一种处理方法，如果真要模拟DOM处理，还要给图形设置父子级关系。

　　以上就是Canvas事件处理的基本方法。在实际运用时，如何缓存图形参数，如何进行循环重绘，以及如何处理事件冒泡，都还需要根据实际情况花一些心思去处理。另外，click是一个比较好处理的事件，相对麻烦的是mouSEOver、mouseout和mousemove这些事件，由于鼠标一旦进入Canvas元素，始终发生的都是mousemove事件，所以如果要给某个图形单独设置mouseover或mouseout，还需要记录鼠标移动的路线，给图形设置进出状态。由于处理的步骤变得复杂起来，必须对性能问题提高关注。

以上就是HTML5 Canvas的事件处理介绍内容，更多相关文章请关注PHP中文网（www.php.cn）！