五角星需用canvas通过极坐标转直角坐标计算5个顶点，按0→2→4→1→3→0顺序连线；先设中心(cx,cy)和半径r，角度从-π/2开始，用cos/sin算坐标，再moveTo+lineTo绘制并stroke/fill。
用 canvas 的 moveTo 和 lineTo 手动画五角星
HTML 本身没有“画五角星”的标签，得靠 canvas + JavaScript 算坐标连线。核心是找出五个顶点的极坐标转直角坐标，再按星形顺序连接（不是顺时针绕一圈，而是隔一个连一个）。
常见错误是直接按角度 0°、72°、144°… 顺次 lineTo，结果画出的是正五边形，不是星。五角星的顶点连接顺序是 0→2→4→1→3→0（下标按 0~4 编号）。
实操建议：
- 先定中心
cx、cy和外接圆半径r - 计算 5 个点：用
Math.cos/Math.sin算出 (x, y)，角度偏移建议从 -π/2 开始，让第一个点在顶部 - 用
ctx.beginPath()→ctx.moveTo()→ 四次ctx.lineTo()→ctx.closePath() - 别忘了
ctx.stroke()或ctx.fill()，否则什么也看不见
示例关键片段：
SVG
- 坐标写成绝对像素值（如
"100,20 131,109..."），别带单位（px、em） - 空格和逗号分隔要严格，多空格或少逗号会导致整个图形不渲染
- 如果星太小或位置偏移，大概率是坐标算错，而不是 SVG 语法问题
-
fill属性
示例（中心在 (100,100)，半径约 80）：
<svg width="200" height="200"><polygon points="100,20 156,115 69,67 131,67 74,115" fill="#ff6b6b" stroke="#4ecdc4" stroke-width="2"></polygon></svg>
用 CSS clip-path 做纯样式五角星（仅现代浏览器）
适合做装饰性图标、按钮遮罩、hover 效果，不依赖 JS 或额外标签。本质是用 polygon() 函数裁剪一个方形元素，裁出五角星轮廓。
难点在坐标归一化：所有值必须是百分比（0%–100%），且按左上角为原点。手算麻烦，但可用工具生成（比如搜索 “pentagram clip-path generator”）。
实操注意：
- 必须给元素设
clip-path，不能只靠mask或filter - 旧版 Safari 需要
-webkit-clip-path前缀，且只支持基本形状（circle、inset），不支持polygon - IE 完全不支持，
clip-path兼容性从 Chrome 55 / Firefox 54 / Safari 15.4 起才稳定 - 动画
clip-path性能较差，别用在频繁重绘区域
一个可用的归一化坐标（50% 为中心）：
.star {
width: 200px;
height: 200px;
background: #4ecdc4;
clip-path: polygon(
50% 0%,
100% 38%,
82% 100%,
18% 100%,
0% 38%
);
}
为什么不用 ![]()
如果你只是要显示一个静态五角星，确实可以扔个 PNG 或用 Unicode ★（\u2605），但它们不可编程控制：填色、描边、大小响应、旋转动画、点击区域都受限。
真正需要“用坐标画”的场景，通常意味着：
- 星的位置/大小要随数据动态变化（比如图表标注）
- 要和其他 canvas 图形混合绘制（比如游戏里可拾取的星星）
- 需精确 hit-testing（判断鼠标是否点中星内，而非整个 bounding box）
- 要支持高 DPI 屏幕，SVG 和 canvas 天然适配，位图会模糊
坐标计算本身不难，难的是记住：五角星不是正五边形，顶点连接顺序错了，就只是个歪掉的五边形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
