Canvas绘制圆角矩形需手动构建路径：推荐arcTo()实现等半径圆角，或arc()分段绘制异半径圆角，封装为支持四角独立半径、自动截断、透明填充及阴影的函数，并注意beginPath、半径边界和高DPI适配。
Canvas 本身没有直接的“带圆角矩形”绘制命令，但可以通过
或路径组合（
+
+
）手动构建圆角矩形路径，再用
填充。关键在于精确控制四角的圆弧起点、终点和切线方向。
使用
绘制圆角矩形（简洁推荐）
适合快速生成标准圆角矩形，尤其当所有圆角半径相同时。它通过两个切线点和一个半径自动计算圆弧，避免手动算角度。
调用前需先
，并从左上角外侧开始（如
）
按顺时针顺序依次调用
到各边中点，再用
转向下一角
每个
中：
是当前角的“内顶点”，
是下一边的“内顶点”，
是圆角半径
完整闭合路径后调用
或
使用
手动绘制（灵活可控）
当需要不同半径（如仅左上、右下圆角）或更精细控制时，用
分段绘制四段圆弧 + 四条直线更可靠。
从左上角内侧开始：
画上边：
画右上圆角：
继续画右边、右下圆角、下边、左下圆角、左边、左上圆角，最后
注意弧度参数：起始角、结束角以弧度为单位，顺时针为
（默认），逆时针为
封装为可复用组件函数
把逻辑封装成函数，支持传入坐标、宽高、四个方向的圆角半径（可设默认值）、填充色、描边等：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
函数签名示例：
内部统一处理半径边界：若某半径超过边长一半，自动截断为最大允许值（如
）
支持透明填充：
可选添加阴影：
、
等
注意事项与常见问题
实际使用中容易忽略几个细节，导致圆角不显示或变形：
确保在
前已调用
，否则可能叠加旧路径
圆角半径不能为负，且单个角的半径不应超过对应邻边长度的一半，否则会拉直或出错
如果只想要填充无边框，记得设置
或跳过
高DPI屏幕（如Retina）下需缩放 canvas 的
/
属性，并用
保持清晰度，圆角路径不受影响
arcTo()moveTolineToarcfill()arcTo()arcTo()beginPath()moveTo(x + r, y)lineTo()arcTo()arcTo(x1, y1, x2, y2, r)(x1,y1)(x2,y2)rfill()stroke()arc()arc()moveTo(x + r1, y)lineTo(x + width - r2, y)arc(x + width - r2, y + r2, r2, -Math.PI/2, 0, false)closePath()falsetrueroundedRect(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.shadowColorshadowBlurfill()beginPath()ctx.strokeStyle = 'transparent'stroke()widthheightctx.scale()