Canvas绘制气泡提示框需将圆角矩形主体与指向箭头作为两个独立路径组合：主体用roundRect()或arcTo()绘制，箭头常用等腰三角形或小矩形实现，关键在于坐标对齐与样式分离控制。

Canvas 绘制气泡提示框，核心是把圆角矩形主体和指向箭头作为两个独立路径组合呈现，不强求单路径闭合。这样既保证视觉连贯，又便于位置对齐、样式分离控制（比如箭头加阴影、主体设内边距）。

圆角矩形主体：优先用 roundRect() 或 arcTo() 构建

现代浏览器支持 ctx.roundRect(x, y, width, height, radius)，传入单一半径或四元数组（[tl, tr, br, bl]）即可生成标准路径，随后调用 fill() 或 stroke() 即可渲染。兼容性要求高时，改用 arcTo() 手动绘制：

• 从左上角外侧起点开始：moveTo(x + r, y)
• 顺时针依次 lineTo() 到各边中点，再用 arcTo(x1, y1, x2, y2, r) 转向下一角
• 每个 arcTo() 的 (x1,y1) 是当前角内顶点，(x2,y2) 是下一边内顶点，r 为圆角半径
• 最后 closePath() 形成封闭路径

箭头部分：等腰三角形最常用且易控

气泡底部箭头朝下时，推荐在矩形底边中点下方延伸一个等腰三角形：

• 设矩形底边中点为 (cx, y + height)，箭头高度为 h（如 8px），底宽为 w（如 12px）
• 三个顶点坐标为：moveTo(cx - w/2, y + height) → lineTo(cx, y + height + h) → lineTo(cx + w/2, y + height)
• 调用 closePath() 后可单独设置 fillStyle，与主体颜色一致或略作区分

位置对齐关键：坐标系与偏移计算

箭头根部必须与矩形底边共线，否则视觉断裂。常见对齐方式：

• 底部气泡：箭头顶点横坐标 = 矩形 x + width / 2，纵坐标 = 矩形 y + height
• 顶部气泡：箭头向下翻转，顶点在矩形顶边中点上方，纵坐标 = y - h
• 左右气泡同理，横向居中、纵向按比例偏移（如 y + height * 0.6）

进阶技巧：小矩形箭头替代方案

若项目强调开发效率或需高频重绘，可用 10×6 像素小矩形代替三角形：

• 直接 fillRect(x + width/2 - 5, y + height, 10, 6)
• 配合 ctx.shadowBlur = 2 和浅色填充，视觉柔化效果接近三角形
• 无需三角函数，适配响应式布局更稳定，尤其适合弹窗类动态气泡