如何使用Canvas绘制圆角线条？尝试drawLine与drawArc未果求解决

阿华AIGC实验室

2026-5-20

解决Canvas绘制圆角线条的问题

看起来你可能混淆了Canvas和Paint的配合逻辑——其实Canvas的所有绘图操作都需要依赖Paint来定义样式，你说用Paint能画出圆角线条，应该是已经配置了正确的Paint属性，但用Canvas的方法时没把两者结合好？我给你两种靠谱的实现方案：

方案1：最简单的实现（利用Paint的StrokeCap）

这应该是你之前用Paint成功的方式，只需要把正确配置的Paint传给Canvas的drawLine方法就行：

先设置Paint为描边模式，指定线条宽度
关键设置strokeCap为ROUND，这样线条的两端会自动变成圆角（圆角半径是线条宽度的一半）

代码示例：

Paint roundLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
roundLinePaint.setColor(Color.BLACK);
roundLinePaint.setStyle(Paint.Style.STROKE);
roundLinePaint.setStrokeWidth(40); // 线条越粗，圆角越大
roundLinePaint.setStrokeCap(Paint.Cap.ROUND); // 开启两端圆角

// 绘制从(100,100)到(500,100)的圆角线条
canvas.drawLine(100, 100, 500, 100, roundLinePaint);

方案2：自定义圆角半径（手动用Path拼接）

如果需要的圆角半径和线条宽度无关（比如圆角比线条粗度大），可以用Path手动构建带圆角的线条，原理是两端画半圆+中间画矩形：

代码示例：

float startX = 100f, startY = 200f;
float endX = 500f, endY = 200f;
float lineWidth = 40f;
float customCornerRadius = 30f; // 自定义圆角半径，可自由调整

Paint customRoundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
customRoundPaint.setColor(Color.DKGRAY);
customRoundPaint.setStyle(Paint.Style.FILL);

// 计算线条的方向向量和垂直方向向量
float dx = endX - startX;
float dy = endY - startY;
float lineLength = (float) Math.hypot(dx, dy);
float unitDirX = dx / lineLength;
float unitDirY = dy / lineLength;
float unitPerpX = -unitDirY; // 垂直于线条的方向
float unitPerpY = unitDirX;

Path roundLinePath = new Path();
// 添加起点的半圆
roundLinePath.addArc(
    startX - unitPerpX*customCornerRadius - unitDirX*customCornerRadius,
    startY - unitPerpY*customCornerRadius - unitDirY*customCornerRadius,
    startX + unitPerpX*customCornerRadius - unitDirX*customCornerRadius,
    startY + unitPerpY*customCornerRadius - unitDirY*customCornerRadius,
    (float) Math.toDegrees(Math.atan2(unitPerpY, unitPerpX)),
    180f
);
// 连接到终点半圆的边缘
roundLinePath.lineTo(
    endX - unitPerpX*customCornerRadius + unitDirX*customCornerRadius,
    endY - unitPerpY*customCornerRadius + unitDirY*customCornerRadius
);
// 添加终点的半圆
roundLinePath.addArc(
    endX - unitPerpX*customCornerRadius + unitDirX*customCornerRadius,
    endY - unitPerpY*customCornerRadius + unitDirY*customCornerRadius,
    endX + unitPerpX*customCornerRadius + unitDirX*customCornerRadius,
    endY + unitPerpY*customCornerRadius + unitDirY*customCornerRadius,
    (float) Math.toDegrees(Math.atan2(-unitPerpY, -unitPerpX)),
    180f
);
// 闭合路径
roundLinePath.lineTo(
    startX + unitPerpX*customCornerRadius - unitDirX*customCornerRadius,
    startY + unitPerpY*customCornerRadius - unitDirY*customCornerRadius
);
roundLinePath.close();

canvas.drawPath(roundLinePath, customRoundPaint);