如何使用HTML Canvas绘制包围两个圆形的路径/图形？

要实现你需要的两个圆形的包围效果，核心是绘制两个圆的外切圆弧，再用两条切线连接圆弧形成闭合轮廓。下面是修改后的完整代码，附详细说明：

var ctx = document.querySelector('canvas').getContext('2d');
var x1 = 123, y1 = 120, r1 = 100; // 第一个圆的圆心坐标和半径
var x2 = 200, y2 = 200, r2 = 50;  // 第二个圆的圆心坐标和半径

// 绘制两个原始圆形
ctx.beginPath();
ctx.arc(x1, y1, r1, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle = '#fff'; // 填充白色避免覆盖后续轮廓
ctx.fill();

ctx.beginPath();
ctx.arc(x2, y2, r2, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();

// 绘制两圆心连线（可选，用于参考）
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = '#999';
ctx.stroke();

// -------------------- 核心：绘制包围轮廓 --------------------
ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.lineWidth = 2;

// 计算两圆心向量和距离
var dx = x2 - x1;
var dy = y2 - y1;
var dist = Math.sqrt(dx*dx + dy*dy);
// 计算两圆心连线的角度
var angle = Math.atan2(dy, dx);

// 计算外切圆弧的偏移角度（基于相似三角形推导）
var offsetAngle = Math.acos((r1 - r2)/dist);

// 绘制第一个圆的外切圆弧
var startAngleA = angle + offsetAngle;
var endAngleA = angle - offsetAngle + 2 * Math.PI;
ctx.arc(x1, y1, r1, startAngleA, endAngleA);

// 绘制到第二个圆的切线
var xTangentB1 = x2 + r2 * Math.cos(angle + offsetAngle);
var yTangentB1 = y2 + r2 * Math.sin(angle + offsetAngle);
ctx.lineTo(xTangentB1, yTangentB1);

// 绘制第二个圆的外切圆弧
var startAngleB = angle - offsetAngle + Math.PI;
var endAngleB = angle + offsetAngle + Math.PI;
ctx.arc(x2, y2, r2, startAngleB, endAngleB);

// 绘制回第一个圆的切线，闭合路径
var xTangentA2 = x1 + r1 * Math.cos(angle - offsetAngle);
var yTangentA2 = y1 + r1 * Math.sin(angle - offsetAngle);
ctx.lineTo(xTangentA2, yTangentA2);

ctx.closePath();
ctx.stroke();

关键逻辑说明： #

1. 将两个圆的参数单独提取，方便后续修改和计算
2. 通过三角函数计算两圆心的连线角度，以及外切圆弧的偏移角度，确保切线与两个圆精准相切
3. 按顺序绘制第一个圆的外弧→到第二个圆的切线→第二个圆的外弧→回第一个圆的切线，形成完整的闭合包围轮廓

内容的提问来源于stack exchange，提问作者Nota