如何在Canvas 2D中绘制指定圆角半径的等边三角形

你的代码问题在于二次贝塞尔曲线的控制点计算不符合等边三角形的角度特性，导致圆角位置和形状偏差。更简单可靠的方法是使用Canvas的arcTo()方法，它能根据两条边的方向自动计算圆角圆弧，无需手动推导复杂的控制点。

以下是修正后的完整实现：

HTML代码 #

<canvas id="arch" width="500" height="500"></canvas>

JavaScript代码 #

const canvas = document.getElementById('arch');
const ctx = canvas.getContext('2d');

const sideLength = 200; // 等边三角形边长
const radius = 15;      // 圆角半径
const h = (Math.sqrt(3) / 2) * sideLength; // 三角形高度

// 计算三个顶点坐标（添加偏移让图形居中显示）
const offsetX = 150;
const offsetY = 100;
const p1 = { x: offsetX, y: offsetY + sideLength };
const p2 = { x: offsetX + sideLength, y: offsetY + sideLength };
const p3 = { x: offsetX + sideLength / 2, y: offsetY };

ctx.beginPath();
// 从第一个边的圆角起点开始
ctx.moveTo(p1.x + radius, p1.y);
// 绘制底边+右下角圆角
ctx.arcTo(p2.x, p2.y, p3.x, p3.y, radius);
// 绘制右边+右上角圆角
ctx.arcTo(p3.x, p3.y, p1.x, p1.y, radius);
// 绘制左边+左下角圆角
ctx.arcTo(p1.x, p1.y, p2.x, p2.y, radius);
ctx.closePath();

ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();
ctx.fillStyle = '#f0f0f0';
ctx.fill(); // 可选填充，方便观察形状

关键说明 #

• arcTo(x1, y1, x2, y2, radius)：该方法会自动计算当前点到两个目标点形成的夹角的切线位置，再绘制对应半径的圆弧，完美适配等边三角形60度内角的圆角需求。
• 若坚持使用二次贝塞尔曲线，需要沿着每个内角的平分线方向计算控制点，计算逻辑繁琐且容易出错，因此优先推荐arcTo方案。

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