碰撞检测刚刚回答了一个H5游戏的问答。一时兴起，正好想写一下碰撞检测，废话不多说，直奔主题。矩形与矩形的碰撞检测Existingrect1={x:0,y:0,w:5,h:5};rect2={x:10,y:10,w:5,h:5};.对于矩形，我们一般有左上角的XY和它的宽高WH。碰撞当然是我中有你，你中有我，所以就是判断四个边，我的左边右边，右边的左边，上面的底边，和底面的顶面。说起来有点啰嗦，直接上代码吧。如果以下四个条件都为真，那么就有一个交集，他们就发生了碰撞。rect1.xrect2.x//rect1.x+rect1.w代表右边界rect1.yrect2.y//rect1.y+rect1.h代表下边界//x和y可以看作起点,x+w和y+h可视为终点。圆与圆碰撞检测现有circle1={x:5,y:5,r:1}；circle2={x:8,y:8,r:1}。对于一个圆，我们一般有的就是圆心的XY和它的半径r。如何判断圆的碰撞？如果距离大于它们的半径之和，则计算两个中心点之间的距离。好吧，让我们分解代码。坐标减法计算坐标点之间的距离，那么我们是直角三角形吗？勾股定理可以求出第三条边，所以可以比较Math.sqrt((circle2.x-circle1.x)**2+(circle2.y-circle1.y)**2)>circle2。r+circle1.r圆与矩形的碰撞检测Existingcircle={x:5,y:5,r:1};rect={x:10,y:10,w:5,h:5};.这个有点难，也没有想象的那么简单。要检查圆和矩形之间的碰撞，请在矩形上找到距离圆心最近的点，并比较两点之间相对于半径的距离。//我们先找到x轴，比较中心点和矩形的左边界，如果不比较右边界。没有左右，就有中间。if(circle.xrect.x+rect.w){returnrect.x+rect.w}else{returncircle.x}//我们然后找到y轴，同理。if(circle.yrect.y+rect.h){returnrect.y+rect.h}else{returncircle.y}//随着我们上面得到的量，计算一下就够了，很简单。圆形和旋转矩形的碰撞检测，可以看下面的链接。这里简单说一下原理。旋转部分是还原矩形，通过矩形的中心点旋转圆。也可以理解为旋转画布，然后找到圆心点，然后基本原理同上。椭圆与椭圆碰撞检测其他检测方式不管怎样，老头正正1、canvas的context.globalCompositeOperation="source-in";destination-in在源图像中显示目标图像。只会显示源图像内部的目标图像部分，源图像是透明的。source-in在目标图像中显示源图像。仅显示目标图像内的源图像部分，目标图像是透明的。DataCircularandRectangleCollisionDetectionCircularandRotatedRectangleCollisionDetectionHTMLcanvasglobalCompositeOperationProperty椭圆碰撞检测
