Canvas绘制圆角边框需精确构造路径：从矩形边界出发，四角用半径r的圆弧替代直角，坐标依矩形参数偏移计算，r须限制为min(r, w/2, h/2)；描边时用beginPath、moveTo、lineTo、arc、closePath确保路径闭合，配置strokeStyle、lineWidth等样式，避免伪圆角；可封装为鲁棒函数支持不同半径与虚线。
Canvas 绘制圆角边框图表，核心在于路径构造的精确性与样式的可控性。它不是简单调用一个 API 就能完成的视觉效果，而是需要你主动控制起点、线段走向、弧线切点和描边行为。只要坐标算准、路径闭合、样式设置得当，就能稳定输出清晰、一致、可复用的圆角边框图表。
圆角边框的坐标逻辑：从矩形边界出发
圆角边框本质是围绕矩形区域绘制的一条带圆弧过渡的封闭路径。它的四个角由半径为 r 的圆弧替代直角，因此关键坐标必须基于原始矩形（x, y, width, height）进行偏移计算：
- 左上角圆心在 (x + r, y + r)，弧线从 π 到 1.5π（即从左→上→上左）
- 右上角圆心在 (x + width - r, y + r)，弧线从 1.5π 到 2π（上→右→右上）
- 右下角圆心在 (x + width - r, y + height - r)，弧线从 0 到 0.5π（右→下→右下）
- 左下角圆心在 (x + r, y + height - r)，弧线从 0.5π 到 π（下→左→左下）
注意：若 r 大于宽度或高度的一半（如 r > width / 2 或 r > height / 2），圆弧会重叠甚至翻转——此时应主动截断，例如设 r = Math.min(r, width / 2, height / 2)，避免图形异常。
描边专用路径：只 stroke，不 fill
绘制纯边框时，目标是清晰、干净的轮廓线，而非填充色。需确保：
- 调用
ctx.beginPath()开始新路径，避免残留路径干扰 - 使用
ctx.moveTo()和ctx.lineTo()连接直线段，用ctx.arc()插入四段圆弧（每段对应一个角） - 路径必须闭合（
ctx.closePath()或首尾自然衔接），否则描边可能断开 - 设置描边样式前，先配置
ctx.strokeStyle、ctx.lineWidth、ctx.lineCap和ctx.lineJoin（建议设为"miter"或"round"，避免尖角突刺）
不推荐依赖 ctx.lineJoin = "round" 配合 strokeRect() 实现“伪圆角”——它仅影响拐角连接处，无法控制弧度大小，且对细线无效，也不适用于填充场景。
样式设计要点：线宽、虚线与抗锯齿
圆角边框的视觉质感很大程度取决于描边参数组合：
-
线宽影响实际尺寸：Canvas 描边是沿路径中心向两侧延伸，所以总宽度会增加
lineWidth。若需严格控制外框尺寸，绘制路径时应将矩形区域向内收缩lineWidth / 2 -
虚线支持原生设置：用
ctx.setLineDash([dash, gap])即可启用虚线；记得之后调用ctx.setLineDash([])清除，避免影响后续绘制 -
抗锯齿默认开启，但高对比边框（如白底黑框）在低分辨率屏上仍可能发虚。可临时关闭：
ctx.imageSmoothingEnabled = false（对线条效果有限，更适用于图像） - 若需不同角不同半径（如仅左上+右下圆角），只需分别计算对应圆心与弧线角度，跳过其他两段弧线和连接线即可
封装建议：一个可靠的基础函数
以下是一个轻量、鲁棒的圆角边框绘制函数，兼顾容错与扩展性：
<!-- 示例函数 -->
function strokeRoundRect(ctx, x, y, w, h, r, strokeColor = '#000', lineWidth = 1, lineDash = []) {<br> r = Math.min(r, w / 2, h / 2);<br> ctx.save();<br> ctx.beginPath();<br> ctx.strokeStyle = strokeColor;<br> ctx.lineWidth = lineWidth;<br> ctx.setLineDash(lineDash);<br> // 左上<br> ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);<br> // 上边<br> ctx.lineTo(x + w - r, y);<br> // 右上<br> ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);<br> // 右边<br> ctx.lineTo(x + w, y + h - r);<br> // 右下<br> ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);<br> // 下边<br> ctx.lineTo(x + r, y + h);<br> // 左下<br> ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);<br> // 左边<br> ctx.lineTo(x, y + r);<br> ctx.stroke();<br> ctx.restore();<br>}
调用示例：strokeRoundRect(ctx, 20, 30, 160, 100, 12, '#4a90e2', 2, [6, 4]); —— 得到一个蓝色双像素虚线圆角边框。
