介绍碰撞检测（CollisionDetection）这个东西，在找canvas相关资料的时候偶然发现的。我有点好奇，于是试着去了解一下。Origin简介MyGitHub一个有点类似于碰撞检测的概念：Hit-testing也被广泛使用。在计算机图形编程中，命中检测是确定用户控制的光标（或触摸屏上的触摸点）是否与屏幕上绘制的给定图形对象（例如形状）相交的过程。按照这个定义，Web开发中的鼠标点击下拉菜单等这些交互就属于这一类。碰撞检测用于检测多个不同图形对象的交集，而不是光标与一个或多个图像对象的交集。这也涉及到网页游戏，其中2D游戏中的碰撞检测算法依赖于碰撞对象的形状（例如矩形到矩形、矩形到圆形、圆形到圆形）。基于canvas，我们来看几个简单的场景。光标碰撞检测使用canvas创建交互时，在canvas中点击，如果需要判断点击所在的图形，需要做碰撞检测。思路比较简单，就是检测光标点击的坐标是否是某种形状。在测试过程中，我们发现了几个需要注意的地方：遍历形状的顺序，因为绘制的图形可能会重叠，后面绘制的一般都在上层。这时候倒序遍历就合理了。获取点击坐标时，注意移动端和PC端对应的属性。移动终端的touch属性中可以有多个坐标。图形的形状、规则图形和不规则图形的判断方法不同。这是一个简单的例子，移动端接入如下：基于上述像素颜色碰撞检测的数学计算方法，如果在一些模式信息的情况下需要存储大量的数据，会很不方便.另一种方法是获取像素块并检测它们的颜色。例如本例中，移动端接入如下：例子中矩形区域为图片，线条颜色为黑色。实现思路是，在球移动前，取包含球且比球稍大的空间像素，遍历像素数据，判断是否有黑色不透明，如果有则表示发生了碰撞将在下一次重绘时发生。在迷宫类游戏的实现中，这种方法会很方便，见迷宫小游戏。测试中有几点需要注意：在选择图片的时候，需要注意图片中颜色的使用，因为要作为判断的依据，颜色值应该不可随意混合。使用getImageData方法时，获取数据的位置是根据画布的实际像素数据，而不是渲染显示的大小。这里的rectangle-to-rectangle碰撞检测是指两个矩形的轴对齐（意思是不旋转）碰撞检测。可以使用如下算法进行判断：varrect1={x:5,y:5,width:50,height:50}varrect2={x:20,y:10,width:10,height:10}if(rect1.x<=rect2.x+rect2.width&&rect1.x+rect1.width>=rect2.x&&rect1.y<=rect2.y+rect2.height&&rect1.height+rect1.y>=rect2.y){//collisiondetected!}上面的条件，相对于刚刚碰撞的状态，想想会更容易理解。这是一个简单的例子，移动端接入如下：CircularandCircularCollisionDetection这种形式的碰撞检测比较的是两个圆心之间的直线距离与两个圆的半径之和。varcircle1={radius:20,x:5,y:5};varcircle2={radius:12,x:10,y:5};vardx=circle1.x-circle2.x;vardy=circle1。y-circle2.y;vardistance=Math.sqrt(dx*dx+dy*dy);if(distance<=circle1.radius+circle2.radius){//检测到碰撞！}这是一个简单的例子，移动访问如下：从上面的例子中发现，如果用在动态场景中，效果可能不如预期。参考2DcollisiondetectionMDNcollisiondetectionwikihittestingwikiJavascript:CollisiondetectionCollisionDetectioninJavascript
