给定一个中心点坐标和三角形边长计算三角形顶点坐标

  /**
   * 根据中心和三角形边长计算 三角形顶点坐标
   * @param {*} centerPoint 三角形中心点
   * @param {*} sideLength 三角形的边长
   */
  computeTriganlePoint = (centerPoint, sideLength = 10) => {
    // 计算三角形的顶点
    const angle = (2 * Math.PI) / 6;  // 60度角的弧度值
    const point1 = {
      x: centerPoint.x,
      y: centerPoint.y - sideLength / 2,
    };
    const point2 = {
      x: centerPoint.x - (sideLength * Math.sin(angle)) / 2,
      y: centerPoint.y + (sideLength * Math.cos(angle)) / 2,
    };
    const point3 = {
      x: centerPoint.x + (sideLength * Math.sin(angle)) / 2,
      y: centerPoint.y + (sideLength * Math.cos(angle)) / 2,
    };
    return [point1, point2, point3]
  }

定义一个角度angle,这里使用60度对应的弧度值。
根据三角函数的关系,计算三个顶点的坐标:
(1)point1是中心点在上方sideLength / 2的位置;
(2)point2和point3分别在中心点的左下和右下方,根据给定的角度和边长通过三角函数计算而得。

你可能感兴趣的:(canvas,前端,canva可画,javascript)