canvas 相切圆形

微信图片_20240418160325.png
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas</title>
  <style>
    body {
      margin: 0;
    }

    canvas {
      border: 1px solid black;
      width: 50%;
      height: 50%;
    }
  </style>
</head>

<body onload="draw()">

  <canvas id="target"></canvas>

  <script>

    /**
     * 获取切点
     * @param c1 大圆
     * @param c2 小圆
     * @param r1 大圆半径
     * @param r2 小圆半径
     */
    function calcQieDian(c1, c2, r1, r2) {
      //圆心之间的距离
      let d = Math.sqrt(Math.pow(c1.x - c2.x, 2) + Math.pow(c1.y - c2.y, 2));
      //外公切线与连心线夹角的角度
      let theta = Math.acos((r1 - r2) / d);
      let vc1c2 = { x: c2.x - c1.x, y: -c2.y + c1.y }; //屏幕坐标系与笛卡尔坐标系是y轴是反着的
      let radC1C2 = Math.acos(vc1c2.x / Math.sqrt(Math.pow(vc1c2.x, 2) + Math.pow(vc1c2.y, 2)));

      if (c2.y <= c1.y) {
        //大圆上的切点
        let p1 = { x: c1.x + Math.cos(theta + radC1C2) * r1, y: c1.y - Math.sin(theta + radC1C2) * r1 };
        let p2 = { x: c1.x + Math.cos(theta - radC1C2) * r1, y: c1.y + Math.sin(theta - radC1C2) * r1 };
        //小圆上的切点
        let p3 = { x: c2.x + Math.cos(theta + radC1C2) * r2, y: c2.y - Math.sin(theta + radC1C2) * r2 };
        let p4 = { x: c2.x + Math.cos(theta - radC1C2) * r2, y: c2.y + Math.sin(theta - radC1C2) * r2 };
        return { p1: p1, p2: p2, p3: p3, p4: p4 };
      } else {
        radC1C2 = Math.PI - radC1C2;
        //大圆上的切点
        let p1 = { x: c1.x + Math.cos(Math.PI - theta - radC1C2) * r1, y: c1.y + Math.sin(Math.PI - theta - radC1C2) * r1 };
        let p2 = { x: c1.x + Math.cos(Math.PI - (theta - radC1C2)) * r1, y: c1.y - Math.sin(Math.PI - (theta - radC1C2)) * r1 };
        //小圆上的切点
        let p3 = { x: c2.x + Math.cos(Math.PI - theta - radC1C2) * r2, y: c2.y + Math.sin(Math.PI - theta - radC1C2) * r2 };
        let p4 = { x: c2.x + Math.cos(Math.PI - (theta - radC1C2)) * r2, y: c2.y - Math.sin(Math.PI - (theta - radC1C2)) * r2 };
        return { p1: p1, p2: p2, p3: p3, p4: p4 };
      }
    }


    function drawLine(ctx, pointStart, pointEnd) {
      ctx.beginPath();
      ctx.moveTo(pointStart.x, pointStart.y);
      ctx.lineTo(pointEnd.x, pointEnd.y);
      ctx.stroke();
    }

    function draw() {
      var canvas = document.getElementById('target');
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight > 600 ? window.innerHeight : 600

      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        //
        const pointA = { x: 600, y: 200, r: 100 }
        const pointB = { x: 200, y: 260, r: 150 }

        /* arc(x, y, 半经, 开始孤度, 结束孤度, 方向）*/
        ctx.beginPath()
        ctx.arc(
          pointA.x, pointA.y, // 圆心位置
          pointA.r, // 半径
          0, // 起始角度
          Math.PI * 4 / 2 // 结束角度 Math.PI 180deg
        )

        ctx.moveTo(pointA.x, pointA.y,) // 圆A 圆心
        ctx.arc(
          pointA.x, pointA.y, // 圆心位置
          1, // 半径
          0, // 起始角度
          Math.PI * 4 / 2 // 结束角度 Math.PI 180deg
        )

        ctx.moveTo(350, 260)

        ctx.arc(
          pointB.x, pointB.y, // 圆心位置
          pointB.r, // 半径
          0, // 起始角度
          Math.PI * 4 / 2 // 结束角度 Math.PI 180deg
        )

        ctx.moveTo(pointB.x, pointB.y,) // 圆B 圆心
        ctx.arc(
          pointB.x, pointB.y, // 圆心位置
          1, // 半径
          0, // 起始角度
          Math.PI * 4 / 2 // 结束角度 Math.PI 180deg
        )
        ctx.lineWidth = 5 // 线宽
        ctx.stroke() // 线路


        let p = calcQieDian(
          { x: pointA.x, y: pointA.y },
          { x: pointB.x, y: pointB.y },
          pointA.r, pointB.r
        );

        drawLine(ctx, p.p1, p.p3);
        drawLine(ctx, p.p2, p.p4);
      }
    }
  </script>
</body>

</html>
canvas 相切圆形

推荐阅读更多精彩内容
