最近遇到一个需求，画一个轮廓，然后外面画一个圆，圆外面再画个箭头表示方向，不能互相遮挡，所以轮廓要完全在圆内。
涉及一个子问题，先调研了一下：计算包含三角形的最小圆。后续根据这个一直迭代计算包含任意多边形的最小圆。
锐角三角形就是外接圆；钝角三角形要取最长边中点作为圆心，最长边长度作为直径；直角三角形可以并入其中任意一种情况。
参照了博客：https://blog.csdn.net/qq_17148595/article/details/122067966
效果如图
附上完整网页代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 #main{
6 height: 100%;
7 display: flex;
8 flex-direction: column;
9 }
10 #top{
11 display: grid;
12 grid-template-rows: 50% 50%;
13 grid-template-columns: 33% 33% 33%;
14 }
15 input{
16 width: 100px;
17 }
18 canvas{
19 flex-grow: 1;
20 }
21 </style>
22 </head>
23 <body>
24 <div id="main">
25 <div id="top">
26 <div>
27 <span>A.x</span>
28 <input type="number" value="333" oninput="update()" />
29 </div>
30 <div>
31 <span>B.x</span>
32 <input type="number" value="400" oninput="update()" />
33 </div>
34 <div>
35 <span>C.x</span>
36 <input type="number" value="315" oninput="update()" />
37 </div>
38 <div>
39 <span>A.y</span>
40 <input type="number" value="100" oninput="update()" />
41 </div>
42 <div>
43 <span>B.y</span>
44 <input type="number" value="200" oninput="update()" />
45 </div>
46 <div>
47 <span>C.y</span>
48 <input type="number" value="370" oninput="update()" />
49 </div>
50 </div>
51 <canvas width="1000" height="800"></canvas>
52 </div>
53 </body>
54 <script>
55 function circleCenter(A, B, C) {
56 let yDelta_a = B.y - A.y;
57 let xDelta_a = B.x - A.x;
58 let yDelta_b = C.y - B.y;
59 let xDelta_b = C.x - B.x;
60 if(xDelta_a==0||xDelta_b==0||yDelta_a==0)//边界情况，把点换个位置
61 return circleCenter(B,C,A);
62 let center = {};
63 let aSlope = yDelta_a/xDelta_a;
64 let bSlope = yDelta_b/xDelta_b;
65 center.x = (aSlope*bSlope*(A.y - C.y) + bSlope*(A.x + B.x)
66 - aSlope*(B.x+C.x) )/(2* (bSlope-aSlope) );
67 center.y = -1*(center.x - (A.x+B.x)/2)/aSlope + (A.y+B.y)/2;
68 center.r=Math.sqrt((center.x-A.x)**2+(center.y-A.y)**2);//求出圆心之后随便跟一个点算距离就是半径
69 return center;
70 }
71 function update(){
72 let c=document.getElementsByTagName('canvas')[0];
73 let ctx=c.getContext('2d');
74 c.width=c.width;//to clear
75 let a=Array.from(document.getElementsByTagName('input')).map(u=>parseInt(u.value));
76 let l=[];
77 for(let i=0;i<3;i++){
78 l.push(Math.sqrt((a[(i+1)%3]-a[i])**2+(a[(i+1)%3+3]-a[i+3])**2));
79 }
80 let max=0;
81 for(let i=1;i<3;i++)
82 if(l[i]>l[max])
83 max=i;//找到最长边
84 if(l.reduce((a,b)=>a+b)-l[max]*2<0.01)//共线
85 return;
86 let sum=0;
87 for(let i=0;i<3;i++){
88 if(i!=max)
89 sum+=l[i]**2;
90 }
91 let circle=circleCenter({x:a[0],y:a[3]}, {x:a[1],y:a[4]}, {x:a[2],y:a[5]});
92 ctx.moveTo(a[0],a[3]);
93 ctx.lineTo(a[1],a[4]);
94 ctx.lineTo(a[2],a[5]);
95 ctx.closePath();
96 ctx.stroke();
97 ctx.strokeStyle='blue';
98 ctx.beginPath();
99 ctx.arc(circle.x,circle.y,circle.r,0,2*Math.PI);
100 ctx.stroke();
101 if(l[max]**2>=sum){//不是锐角三角形
102 ctx.strokeStyle='red';
103 ctx.beginPath();
104 ctx.arc((a[max]+a[(max+1)%3])/2,(a[max+3]+a[(max+1)%3+3])/2,l[max]/2,0,2*Math.PI);
105 ctx.stroke();
106 }
107 }
108 update();
109 </script>
110 </html>
标签：aSlope,center,max,xDelta,外接圆,let,三角形,锐角三角,yDelta From： https://www.cnblogs.com/nsyglpc/p/16839795.html