canvas如何判断四边形是否凹陷？

Question

需要：canvas手动画四边形，但不能凹的四边形？
问题：如何判断凹的四边形，判断两个角度不能大于180°，这样可以实现吗？还是说计算面积来判断？

Answer 1

如何判断一个多边形是凸多边形还是凹多边形

他这个不对，自己写了个，使用的大概原理就是凸多边形两个相邻的的向量方向应该是一样的，排除平行线时的0，所以乘积不会小于0，小于0则是凹多边形

function IsConcavePolygon(points){
    let direction = 0
    for(let i = 0, l = points.length; i < l; i++){
        let res = getAngleBy3Point(points[i == 0 ? (l - 1) : (i - 1)], points[i], points[i == (l - 1) ? 0 : (i + 1)])
        console.log(res)
        //乘积小于0，说明方向不一致，为凹多边形
        if(direction * res.direction < 0){
            return true
        }
        direction = direction || res.direction
    }
    return false
}

function getAngleBy3Point(point1, point2, point3) {
  let xa = point2[0] - point1[0]
  let xb = point3[0] - point2[0]
  let ya = point2[1] - point1[1]
  let yb = point3[1] - point2[1]

  //direction 大于0 逆时针, 小于0 顺时针, 等于0 平行
  let angle = 0, direction = 0

  let _a = Math.sqrt(xa * xa + ya * ya)
  let _b = Math.sqrt(xb * xb + yb * yb)
  if(_a && _b){
    let p = xa * xb + ya * yb

    angle = Math.acos(p / (_a * _b))
    angle = angle / Math.PI * 180
    direction = xa * yb - ya * xb
    direction = direction < 0 ? -1 : direction > 0 ? 1 : 0
  }
  
  return { angle, direction }
}

IsConcavePolygon([[0, 0], [0, 5], [5, 5], [2, 2], [5, 0]])  // true

IsConcavePolygon([[0, 0], [0, 5], [5, 5], [5, 0], [0, 0]])   // false

Answer 2

四边形的话可以判断对角线的线段是否相交。凸四边形两对角线线段相交; 凹四边形两对角线所在的线段不相交。JS计算两线段相交可以看这个 【JS图形学基础】平面向量的计算和运用实例