canvas绘制卡片式ui需分层实现：先用多层半透明矩形叠加模拟阴影，再用arcto手动构建圆角矩形路径，最后按阴影→主体→内容顺序绘制，并通过dpr缩放、抗锯齿优化和函数封装提升复用性与精度。
Canvas 绘制带阴影与圆角的卡片式 UI 组件，核心在于分层绘制：先画阴影（偏移+模糊模拟），再画圆角矩形主体，最后叠加内容。纯 Canvas 不支持 CSS 那样的 box-shadow 或 border-radius，需手动计算和绘制。
1. 绘制柔和阴影（模拟高斯模糊效果）
Canvas 原生不支持高斯模糊，但可通过多层半透明矩形叠加实现近似效果：
- 用 fillRect 在主卡片偏移位置（如 x+2, y+2）绘制一个稍大的半透明黑色矩形（如 rgba(0,0,0,0.15)）
- 重复绘制 3–5 次，每次微调偏移量（+1px/+0.5px）和透明度（逐步降低），形成渐变衰减感
- 更高效的方式是使用 globalAlpha + 多次小步偏移填充，避免创建多个路径
2. 绘制圆角矩形主体
Canvas 没有内置圆角矩形 API，需用 arcTo 或 bezierCurveTo 手动构建路径：
- 推荐用 arcTo(x1, y1, x2, y2, radius)：从起点出发，沿切线过渡到两直线交点，适合直角转圆角
- 完整路径示例：moveTo 左上角 → lineTo 右上角 → arcTo(右上、右下坐标, radius) → lineTo 右下 → arcTo(右下、左下, radius) → lineTo 左下 → arcTo(左下、左上, radius) → closePath
- 注意：arcTo 要求前一段路径已存在，且四点共面；radius 超过边长时自动截断为最大可行值
3. 分层绘制与抗锯齿优化
为避免阴影与卡片边缘混叠失真，需控制绘制顺序与像素对齐：
- 先绘制阴影层（整体偏移），再绘制卡片主体（严格对齐设备像素），最后绘制文字/图标
- 启用 ctx.imageSmoothingEnabled = false 防止缩放模糊；对 canvas 设置 devicePixelRatio 缩放可提升清晰度
- 圆角路径绘制后，调用 ctx.fill() 前确保 lineWidth = 0（避免描边干扰填充）
4. 封装为可复用函数
将逻辑抽成函数，便于配置尺寸、圆角、阴影强度等参数：
- 函数接收 ctx、x、y、width、height、radius、shadowBlur（模拟值）、color 等参数
- 内部自动处理 dpr 缩放、阴影多层循环、路径重置（beginPath）和样式恢复（save/restore）
- 返回包含 { x, y, width, height } 的边界对象，方便后续添加点击热区或子内容定位
