廢話不多說之間看效果圖，只要解決了這個效果水滴tabbar就能做出來了

源碼地址

一、核心實現步驟分解

布局結構搭建

使用 作為繪制容器
設置 width=600, height=200 基礎尺寸
通過 JS 動態計算實際尺寸（適配高清屏）

function initCanvas() {// 獲取設備像素比（解決 Retina 屏模糊問題）const dpr = window.devicePixelRatio || 1;// 獲取父容器實際顯示寬度（CSS像素）const containerWidth = canvas.parentElement.clientWidth;// 設置 Canvas 的 CSS 顯示尺寸canvas.style.width = containerWidth + 'px'; canvas.style.height = '200px';// 設置 Canvas 的實際像素尺寸（物理像素）canvas.width = containerWidth * dpr;canvas.height = 200 * dpr;// 縮放坐標系（關鍵步驟！保證繪制內容高清）ctx.scale(dpr, dpr);
}

水滴形狀繪制

幾何分解：水滴 = 左右對稱曲線 + 中間半圓
貝塞爾曲線控制點：通過三段三次貝塞爾曲線連接
動態坐標計算：基于 Canvas 寬度動態定位

// 三段貝塞爾曲線參數配置
const curves = {left: {  P0: { x: width - len, y: 0 },         // 左曲線起點CP1: { x: width - r1 - r2/2, y: 0 },  // 控制點1（水平左移）CP2: { x: width - r1, y: r2/2 },      // 控制點2（垂直下壓）P3: { x: width - r1, y: r2 }          // 連接中間半圓左端點},// ... 其他曲線段類似
};// 路徑繪制執行
ctx.beginPath();
ctx.moveTo(0, 0);  // 從左上角開始
ctx.lineTo(curves.left.P0.x, curves.left.P0.y); // 繪制左側直線// 繪制左半曲線
ctx.bezierCurveTo(curves.left.CP1.x, curves.left.CP1.y,curves.left.CP2.x, curves.left.CP2.y