Canvas绘制圆角矩形需手动构建路径：推荐arcTo()实现等半径圆角，或arc()分段绘制异半径圆角，封装为支持四角独立半径、自动截断、透明填充及阴影的函数，并注意beginPath、半径边界和高DPI适配。
Canvas 本身没有直接的“带圆角矩形”绘制命令，但可以通过 arcTo() 或路径组合（moveTo + lineTo + arc）手动构建圆角矩形路径，再用 fill() 填充。关键在于精确控制四角的圆弧起点、终点和切线方向。
使用 arcTo() 绘制圆角矩形（简洁推荐）
arcTo() 适合快速生成标准圆角矩形，尤其当所有圆角半径相同时。它通过两个切线点和一个半径自动计算圆弧，避免手动算角度。
- 调用前需先
beginPath()，并从左上角外侧开始（如moveTo(x + r, y)） - 按顺时针顺序依次调用
lineTo()到各边中点，再用arcTo()转向下一角 - 每个
arcTo(x1, y1, x2, y2, r)中：(x1,y1)是当前角的“内顶点”，(x2,y2)是下一边的“内顶点”，r是圆角半径 - 完整闭合路径后调用
fill()或stroke()
使用 arc() 手动绘制（灵活可控）
当需要不同半径（如仅左上、右下圆角）或更精细控制时，用 arc() 分段绘制四段圆弧 + 四条直线更可靠。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 从左上角内侧开始：
moveTo(x + r1, y) - 画上边：
lineTo(x + width - r2, y) - 画右上圆角：
arc(x + width - r2, y + r2, r2, -Math.PI/2, 0, false) - 继续画右边、右下圆角、下边、左下圆角、左边、左上圆角，最后
closePath() - 注意弧度参数：起始角、结束角以弧度为单位，顺时针为
false（默认），逆时针为true
封装为可复用组件函数
把逻辑封装成函数，支持传入坐标、宽高、四个方向的圆角半径（可设默认值）、填充色、描边等：
立即学习“前端免费学习笔记（深入）”；
- 函数签名示例：
roundedRect(ctx, x, y, w, h, r = 0, rTL = r, rTR = r, rBR = r, rBL = r) - 内部统一处理半径边界：若某半径超过边长一半，自动截断为最大允许值（如
rTL = Math.min(rTL, w/2, h/2)） - 支持透明填充：
ctx.fillStyle = 'rgba(0,128,255,0.7)' - 可选添加阴影：
ctx.shadowColor、shadowBlur等
注意事项与常见问题
实际使用中容易忽略几个细节，导致圆角不显示或变形：
- 确保在
fill()前已调用beginPath()，否则可能叠加旧路径 - 圆角半径不能为负，且单个角的半径不应超过对应邻边长度的一半，否则会拉直或出错
- 如果只想要填充无边框，记得设置
ctx.strokeStyle = 'transparent'或跳过stroke() - 高DPI屏幕（如Retina）下需缩放 canvas 的
width/height属性，并用ctx.scale()保持清晰度，圆角路径不受影响
