标签：碰撞检测 图像 rect2 rect1 矩形 rect
碰撞检测
刚才回答了一个H5游戏的问答。心血来潮，就想写写碰撞检测，废话不多说，直接怼。
矩形和矩形的碰撞检测
现有rect1 = {x:0,y:0,w:5,h:5};rect2 = {x:10,y:10,w:5,h:5};。
矩形我们一般拥有的都是左上角点的XY以及他的宽高WH。碰撞当然就是我中有你，你中有我咯，那么就是判断四条边，在我左边的右边，右边的左边，上边的下边，下边的上边。说起来有点绕口，那就直接上代码吧，下面四个条件如果都成立那么就是有交集，他们碰撞了。
rect1.x < rect2.x + rect2.w // rect1.x 代表左边界
rect1.x + rect1.w > rect2.x // rect1.x + rect1.w 代表右边界
rect1.y < rect2.y + rect2.h // rect1.y 代表上边界
rect1.y + rect1.h > rect2.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
圆形和矩形的碰撞检测
现有circle={x:5,y:5,r:1};rect={x:10,y:10,w:5,h:5};。
这个就有点难度了不是想象中的那么简单，要检查圆形和矩形碰撞，矩形上找到离圆心最近的点，比较两点距离对于半径。
//我们先找x轴，比较圆心点和矩形左边界，如果不是比对右边界。如果不存在左右就是存在中间呗。
if(circle.x<rect.x){return x}
else if(circle.x>rect.x+rect.w){return rect.x+rect.w}
else{return circle.x}
//我们再去找y轴，同样的道理.
if(circle.y<rect.y){return y}
else if(circle.y>rect.y+rect.h){return rect.y+rect.h}
else{return circle.y}
//有上面我们获得到的量，去计算就可以了，这就很简单了。
圆形与旋转矩形碰撞检测
可以看我下面的那个链接，我在这里先大体说一下原理，旋转部分是把矩形复原，把圆形通过矩形的中心点旋转，也可以理解为旋转画布，然后找圆形中心点，之后基本原理同上。
椭圆与椭圆碰撞检测
其他的检测手段
不管什么东西，老夫就是正面刚
1.canvas的context.globalCompositeOperation="source-in";destination-in 在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。source-in 在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。
资料
标签：碰撞检测,图像,rect2,rect1,矩形,rect 来源： https://www.cnblogs.com/10manongit/p/12824744.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。