《Canvas核心核技术》一书详细讲解了H5 Canvas 2D绘图的相关的知识。包括绘图环境、路径、剪辑区域、合成模式等基本概念,以及动画及游戏制作的基本流程。
双缓冲机制及填充的非零环绕原则update只更新图形对像属性,draw方法专注绘制。这样做使得绘制和更新有了自己的专有职责,隔离绘制和更新可以大大减小代码杂度。
使用行为模式以添加行为的方式为图形对像添加动画效果
用状态模式响应用户事件
最简单的碰撞检测就是通过对不规则图形规则化,然后使用简单的几何公式判断各图形两两之间是否重叠来判断是否发生碰撞。常见的有外接矩形法和外接圆形。
光线投射法用于判断运动较快的物体的碰撞。当一个物体A沿一定方向向另一个物体B快速移动时,如果物体比较小,那么在动画更新过程中,很有可能这两个物体不发生真实的碰撞,而是直接从B的前方直接到后方。比如子弹的运动。如果动画播放过程中A由B的前方直接到了后方,并且A的速度向量的反向延长线与B有相交,则任为碰撞发生了。
通过分离轴定理(SAT)判断是否发生碰撞
对于任意两个多边形,通过计算两个图形在其所有边上的投影是否有重叠来判断是否发生碰撞,跟据定理,只要有一个投影有重叠就表示两个多边形有重叠部分。
1. 投影:多边形到边的投影用数学表示即为数轴上的线段。 2. 通过向量计算投影:计算所有多边形的所有原点到顶点的向量到边的单位向量的所有点积集合,取最大值和最小值构成数轴上的线段即为投影
对于圆与任意多边形,判断方式不变,由于圆没有边,故需要计算找出多边形所有顶点中离圆心最近的顶点到圆心的向量作为圆提供的“边”(投影轴)进行计算
1. 圆的投影:原点到圆心向量与轴的点积加减半径构成的线段
对于圆与圆直接计算圆心矩与半径和即可判断是否发生碰撞。
在实际应用场景中需要根据不同问题决定采用何种检测方式,有时也会采用多种方式组合进行检测,以提高准确率。