现代浏览器可用ctx.roundrect()直接绘制圆角路径并自然渲染阴影；旧版需手写path闭合路径；图片圆角阴影须用createpattern填充路径；阴影不显主因是shadowcolor未设或父容器overflow:hidden。
用 roundRect() 画圆角路径再加阴影
现代浏览器（Chrome 102+、Firefox 111+、Safari 16.4+）已原生支持 ctx.roundRect()，它是绘制圆角卡片最简洁可靠的方式。只需先设置阴影参数，再调用 roundRect + fill/stroke，阴影会自然贴合圆角边缘：
- 设置阴影：必须指定 shadowColor（如
"rgba(0,0,0,0.12)"），再设 shadowOffsetX/Y（推荐 4px/4px）和 shadowBlur（8–16px 较柔和） - 绘制路径：调用
ctx.roundRect(x, y, width, height, radius)，radius 可为单值（四角等圆角）或数组（如[12, 12, 0, 0]控制单边） - 触发渲染：紧接着调用
ctx.fill()或ctx.stroke()，阴影即生效；无需 clip，不会被裁切
兼容旧版浏览器：手写 Path + closePath
若需支持 Chrome 101 以下或部分安卓 WebView，可用 arcTo() 或 quadraticCurveTo() 手动构建闭合路径。关键在于路径必须首尾相连、方向一致（顺时针），否则 fill/stroke 边界异常：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 起点设在左上角内侧：
ctx.moveTo(x + r1, y) - 依次连接上边、右上角弧、右边、右下角弧……最后回到起点
ctx.closePath() - 路径完成后，再设阴影并 fill —— 此时阴影依附于整个闭合轮廓，圆角处过渡自然
- 避免在路径中穿插
clip()，否则阴影会被限制在裁剪区内而消失
给圆角图片加阴影的特别处理
若卡片含图片且需圆角+阴影，不能直接对图片 clip() 后 drawImage —— 这会导致阴影被裁掉。正确做法是：
- 用 createPattern() 将图片转为填充样式
- 用
roundRect()或手写路径定义圆角区域 - 调用
ctx.fillStyle = pattern; ctx.fill();—— 阴影此时作用于路径外缘，完整可见 - 必要时扩大 canvas 尺寸（宽高各加
shadowBlur + |offset|），为阴影预留渲染空间
避坑要点：阴影不显示的常见原因
阴影“消失”往往不是代码没写，而是被隐式裁剪或未激活：
- shadowColor 为空字符串或未设置：这是最常被忽略的——其他三个属性设了也没用
- 父容器有
overflow: hidden且卡片超出其边界：阴影属于卡片自身绘制产物，但会被父级裁剪 - 卡片应用了
transform（如 scale、rotate）：会创建新层叠上下文，改变阴影渲染边界 - 使用
filter: drop-shadow()替代：虽能绕过裁剪，但无法控制偏移、影响性能，仅作备用方案
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
