HTML5 Canvas 没有 fillTriangle API，倒三角需手动计算三个顶点坐标：底边左上、右上和尖端正下，再用 beginPath→moveTo→lineTo→closePath→fill 绘制。
用 canvas 的 fillTriangle？不存在这个 API
HTML5 里没有现成的 fillTriangle 或 drawInvertedTriangle 函数。倒三角形得靠自己算三个顶点坐标，再用 beginPath + moveTo + lineTo + closePath + fill 这一套手动画出来。
关键不是“怎么画三角形”，而是“怎么让顶点顺序构成倒置”。顺时针或逆时针闭合路径本身不影响朝向，朝向只取决于你给的三个点坐标位置关系。
- 顶点顺序不影响正/倒——
fill()只认坐标，不认方向 - 所谓“倒三角”，就是把通常的“尖朝上”改成“尖朝下”，即底边在上、顶点在下
- 别依赖 CSS transform 翻转 canvas 元素，那会翻转整个绘图上下文，文字、阴影全跟着倒
ctx.moveTo 和 ctx.lineTo 怎么排三个点
假设你要画一个宽 100px、高 60px 的倒三角，居中放在画布 (200, 150) 位置。核心是把三个点设为：
① 底边左端点（上）、② 底边右端点（上）、③ 尖端点（正下方中心）
立即学习“前端免费学习笔记（深入）”；
const ctx = canvas.getContext('2d');
const x = 200, y = 150, width = 100, height = 60;
ctx.beginPath();
ctx.moveTo(x - width/2, y - height/2); // 左上
ctx.lineTo(x + width/2, y - height/2); // 右上
ctx.lineTo(x, y + height/2); // 正下（尖）
ctx.closePath();
ctx.fill();
- 注意：y 轴向下为正，所以“上”要减，“下”要加
- 别写成
moveTo(x, y)再连两个斜点——那样容易错位，直接按几何逻辑给绝对坐标更稳 - 如果后续要 stroke，记得在
fill()前调用stroke()，否则只有填充无边框
用 clip 或 transform 真的省事吗
有人想绕开坐标计算，用 ctx.scale(1, -1) 把 Y 轴翻转，再画个正三角。听起来快，但实际埋坑：
-
scale(1, -1)后所有绘制都会被垂直镜像，包括文字、图片、阴影偏移方向 - 如果你在翻转后用
fillText标注，字会倒着显示，还得额外再scale(1, -1)回来 -
clip()也不适合——它只是裁剪区域，不能凭空生成倒三角形状 - 真正省事的方式是封装一个函数：
drawInvertedTriangle(ctx, x, y, width, height)，复用上面那套坐标逻辑
SVG 方式画倒三角更简单？
如果项目允许用 SVG（而不是必须 canvas），那确实更直观：
三个点：顶点在上（50），两个底角在下（110），天然倒置。但注意：
- SVG 的
- canvas 和 SVG 坐标系 Y 轴方向一致（向下为正），所以同一组数值在两者中表现相同
- 如果页面需要响应式缩放，SVG 的
viewBox更可控；canvas 则需监听resize并重绘
倒三角本身没玄机，难的是坐标准确性、坐标系理解、以及别被“翻转”这种表面技巧带偏。画布上每个像素都只认你给的数字，不信就打个点验证一下 ctx.fillRect(x, y, 1, 1)。
