介绍了鼠标事件、触摸事件、键盘事件等用户操作事件。 但迄今为止，除了键盘事件外，几乎没有对其他两个事件做出回应。 那么，本章将学习如何使canvas中的物体对用户的运动做出反应，以及如何拖动和投掷物体。 请不要担心。 使用我们学到的东西。 本节的主要内容：
捕获物体
捕获验证
物体的拖曳
1 .物体捕获
鼠标虽然简单，但却是非常高效的装置。 简单来说，我只做两件事：移动监视和按钮点击。 然后，计算机根据鼠标获得的信息，进行位置跟踪、事件发生时点击光标位置、确定鼠标移动速度、识别双击事件等多项操作。 仔细想想，这些是否都可以归结为鼠标的点击和移动。
现在仔细回想一下我们平时玩游戏的时候，是如何移动物体的。 当然，如果你没玩过，就别想了。 基本流程如下。
时钟-移动-发布
与整个过程相对应的事件包括：
mousedown:在按下鼠标按钮时发生
mouseup :当鼠标按钮上升时发生
mousemove:gjdst移动鼠标时发生
好的！ 我们现在知道，移动一个物体分为几步。 (是和想起把大象放进冰箱的事情分开了几步吗？ 接下来还有一件重要的事。 如何捕获物体呢？ 我们已经知道如何移动物体，但如果你没有移动的对象，那就没用了！ 简单来说，就是如何判定我们的鼠标是否真的被物体点击了。 你知道那个不行，必须通知我们的电脑。
1.1外接矩形判别法
这里为了便于理解，画了两倍详细的图。 灰色区域表示canvas，蓝色区域表示rect，
我们知道的是rect的坐标(这里以左上角为坐标基准)和宽度的高度。 当鼠标单击蓝色区域，即rect上时，表示我们正在捕获这个物体。 怎么把鼠标落在这个区域上呢？ 让我们看看以下几个条件：
1.mouse.x rect.x
2.mouse.x rect.x rect.width
3.mouse.y rect.y
4.mouse.y rect.y rect.height
列举了四个条件。 仔细比较一下照片吧。 如果同时满足所有条件，不就能判定我们的鼠标掉在rect上了吗？ 因此，如果要检测的物体是矩形或接近矩形，可以使用该方法。
1.2外接圆判别法
物体变成圆后，用上面的方法判定鼠标是否掉在了ball上，就知道不是那么准确了。 当然，不是不行，而是不准确，但球体小的时候可以接受。
对于球体，还有另一种方法。 那就是判定老鼠离球心的距离。 如果距离小于球的半径，则可以判断鼠标落入了球，但没有相反。 所以，如果想检测的物体接近圆，可以使用这种方法。
距小鼠球心的距离
dx=mouse.x - ball.x；
dy=mouse.y - ball.y；
dist=math.sqrt(dx*dxdy*dy ) )。
dist ball.radius (if ) {
//撞到了
}
1.3多边形和不规则图形
如果我们要捕获的对象不规则，那就很难了。 分离轴定理(SAT )和最小平移向量(MTV ) )。 听起来很高级呢。 自己调查一下吧！ 其实很简单，这里就不介绍了。
本章为了简单起见，我们的球体也使用外接矩形法。 必须将以下代码添加到ball.js文件中：
ball.prototype.get bounds=function {
return {
x: this.x - this.radius，
y: this.y - this.radius，
width: this.radius*2，
height: this.radius*2
(；
}
在此，如图所示，定义返回包含物体坐标(相对于左上角)和宽度、高度的对象的方法getBounds )。 此外，还必须在工具函数文件utils.js中添加新方法。
utils.contains point=function (rect，x，y ) {
返回！ (xrect.x rect.width ||
yrect.y rect.height；
}
此方法返回布尔值。 如果在区域中，则返回以下值： (0
|| 0 || 0 ||
0 )即true，如果不满足任何条件，则长时间返回false，表示不在区域内。 此方法传递三个参数：
rect:表示要检测的物体
x，y:鼠标坐标
2 .捕获验证
为了防止步子迈的太大扯着蛋！我们先做个简单的效果：
当在鼠标没有点击在ball上时，打印出canvas和当前的活动状态，当鼠标点击在球体上时打印出ball和鼠标的运动状态。具体代码如下：
"canvas"width="400"height="400"style="background:#000;">
your browser not support canvas
"textarea"id="txt"cols="30"rows="10">
"../js/utils.js">
"../js/ball.js">注意这里，我们将mouseup，mousemove定义在了mousedown事件内部。也就是说如果mousedown事件不触发，就无法触发另外两个事件。想想我们移动一个物体的基本流程，也的确合乎情理。
touch事件与鼠标点击事件很相似，这里我就不给代码了，具体的文件可以在文章开头看到。
3.物体的拖拽
有了前面的基础，要移动一个物体算什么难事，我们先上效果图：
具体代码如下：
"canvas"width="400"height="400"style="background:#000;">
your browser not support canvas
"../js/utils.js">
"../js/ball.js">
这部分代码，其实只是在对上部分代码的改进。我们在canvas上设置了mousedown事件，当鼠标点击在canvas上时，就会触发。此时注意我们的判定条件，如果为true,就会执行if中的语句。
if中，我们为canvas添加了mousemove和mouseup事件，mousemove事件的触发是在鼠标点击在了ball之后，移动鼠标才触发的，他执行的函数是onMouseMove。mouseup是当鼠标抬起是触发的，执行函数是onMouseUp。
在onMouseMove函数中我们重新设置了ball的位置。onMouseUp函数中移除监听事件。
注意，这里有两个变量w和h,这两个变量的作用是修正ball的位置的。为什么这样说呢？因为当我们点击球体的时候，不一定点击的就是球体的球心。这时移动物体，如果没有这个修正值，小球就会出现一个快速的偏移，让鼠标位于小球的球心，感觉很别扭。所以，在点击时，我们就把鼠标与球心之间的坐标差值计算出来，在移动的时候给个修正就不会出现快速偏移的现象了。