物体对象

作者：TG 日期： 2016-06-05 字数： 3071 阅读： 3254

在前面的《用户交互》和《动画》两章中，我们分别介绍了用户交互事件，包括：鼠标事件，触摸事件和键盘事件，还有如何加载多张图片，如何用window.requestAnimationFrame()来执行动画。

接下来，我们介绍一下在动画中的一个重要角色：物体。要使用物体对象，我们就必须捕获到物体对象。

不过，在canvas中，我们不能像在DOM中那样进行操作，为什么呢？

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

比如，我们在canvas中画了一个矩形

cxt.fillRect(20,50,50,50);

可是，当我们打开浏览器的开发者工具，我们会看到canvas标签内部并没有增加任何内容，而在js里获取到的canvas元素以及当前的上下文，也都没有任何表示新增图形的内容。

所以，我们现在只能把事件绑定到canvas这一层上，如果我们想进一步深入，识别点击发生在Canvas内部的哪一个图形上，就需要增加代码来进行处理。

基本思路是：给Canvas元素绑定事件，当事件发生时，检查事件对象的位置，然后检查哪些图形覆盖了该位置。

1.1 矩形判别法

我们用一张图来看看吧，红色块代表物体（body），(x,y)为它的左上角坐标，width是它的宽，height是它的高。当鼠标点击或手指触摸在红色块上，就表示我们捕获了这个物体，那我们如何判断鼠标或手指落在上面呢？

只要满足以下四个条件

mouse.x > body.x
mouse.x < body.x + body.width
mouse.y > body.y
mouse.y < body.y + body.height

1.2 圆形判别法

其实，如果是较小的圆形，我们也可以采取矩形判别法的四个判断条件。但是，如果你要很精确的话，那么我们可以根据圆形的半径，也就是鼠标位置距离圆心的距离来判断。

dx = mouse.x -body.x;
dy = mouse.y - body.y;
dist = Math.sqrt(dx*dx + dy*dy)
if(dist < body.radius){  
    //获取到物体
 }