简介一份面向编程初学者与图形绘制爱好者的五角星绘图示例基于C开发环境编写演示如何通过循环与角度控制完成几何图形绘制适合在可视化应用或教学示例中参考学习。资源压缩包共有六个文件体积约9KB包含一个源代码文件以及工程工作区、项目设置、辅助选项等配置类文件便于直接打开工程查看与调试代码。围绕五角星绘制这一核心主题程序通过五次前进与转向即可闭合图形代码结构简洁能帮助读者理解多边形绘制的角度换算、循环嵌套与模块化函数设计并将思路迁移到Python Turtle、HTML Canvas等其他绘图环境中。资源整体精炼无冗余素材可作为图形编程入门练习或课堂配套示例通过调整边长与嵌套次数还可快速生成组合星型图案为进一步探索递归绘图与动画效果打下基础。已有714人学习下载适合需要快速上手图形绘制的初学者参考。1. 绘制五角星为什么一把尺子加圆规画对了代码却画歪了“绘制五角星”听起来是图形入门里最简单的一课但我见过太多开发者在第一行turtle.forward()之前就翻车。原因出在一个大家默认不用算、实际必须算的点上五角星并非“五个角各 72°”而是每个拐角只转 36°、外伸角落在圆周的五等分点上。圆规时代靠目测代码时代靠显式坐标——只要你漏掉一次转向或把半径算错画出来的就不是星是一团交叉的折线。这篇笔记写给三类人刚用 Python turtle 练手的初学者、要在 CAD/SVG 里批量生成星星图标的工程师、以及想把“画个星”变成可控函数供项目复用的开发者。我们不聊艺术只聊数学和工程边界从极坐标方程到 turtle 最小命令从五个必调的参数到三条翻车现场最后再给一个能让星星动起来的进阶技巧。看完你不需要抄任何人的成品代码自己能把这个函数写得比教程更稳。2. 五角星的几何原理一个角度决定标不标准2.1 从圆周五等分到黄金比例五角星其实是两条半径的差标准的五角星可以理解成先在圆周上均匀取五个点依次跳过相邻点连线第 0 个连第 2 个第 2 个连第 4 个……首尾相接后形成的闭合自交多边形。这里最关键的两个几何量是外接圆半径R五个顶点所在圆的半径决定星星整体大小内角半径r五条边交汇形成的内部小五边形的外接圆半径通常按黄金比例压缩r ≈ R * 0.382即1 / φ²φ 为黄金分割比 1.618。当r不满足这一比例时画出来的星星会显得“胖”或“瘦”后者在星形图标里极常见。真正决定转向角度的是内角而不是外角。从一条边转到下一条边笔尖方向变化量是180° - 内角。五角星每个内角是 36°所以每次转向 144°——这是初学者最爱错的地方以为五个顶角就对应 72°实际每次turtle.left(144)而非72。比较两种写法每画一条边left(72)会得到正五边形不是星形每画一条边left(144)得到标准五角星每画一条边left(216)即 144方向等价但会让图形走向相反。这个 144° 的来由值得亲手推一遍正五边形每个内角是 108°而五角星顶点处的尖角是 36°正好是 180° - 108° - 36°由外角和定理可证。记不住公式时直接在纸上用量角器画一画比看任何推导都直观。2.2 用极坐标描述顶点任何语言都能复现的 11 行星代码不依赖 turtle 镜像五个顶点坐标本身可以用极坐标公式给出import math def star_vertices(center_x, center_y, R, r, rotation0): pts [] for i in range(10): rad R if i % 2 0 else r angle math.radians(i * 36 rotation) x center_x rad * math.cos(angle) y center_y rad * math.sin(angle) pts.append((x, y)) return pts这段逻辑说明一圈 360°五角星有 10 个关键折点5 个外顶点 5 个内凹点相邻折点间隔 36°。奇数次点在外接圆上偶数次点在内接圆上交替连接正好形成一条连续的自交折线。rotation是整体绕中心旋转的角度单位是度用于让星形方向对准正上、正右或任意方向。参数说明R控制外接圆半径即五角星整体覆盖范围r控制内部收缩量r与R的比值越小五角星越“细锐”r偏大则会变成接近圆边的“胖星”。实际工作中如果你不知道具体该用多少黄金比例0.382是最安全的取值。这种“交替取半径”的方法还有一个副产品不用任何图形库也能算出五角星的边界框方便后续做碰撞检测、缩放、对齐。同理可用于正七角星、正九角星——只要把36°换成180° / n10换成2n即可。2.3 为什么有人用 72° 却画出了星聊聊误区来源网上不少教程画的其实不是“一笔五角星”而是“两个重叠三角形”或“五边形外扩”。用 72° 的确能画出一个像星又不完全标准的轮廓因为 72° 是五边形的外角。如果你不小心在left(144)和left(72)之间来回混用会得到一种“扭曲的五芒星”——单看局部没毛病闭合后顶点错位、线条互穿。判断一个五角星是否几何标准看两个特征第一五条边的延长线能在外接圆处两两相交第二任意一条边的两个端点与圆心连线的夹角是 72°而不是 36° 或 144°。用 turtle 画完后把stamp()的坐标点打印出来算一下相邻顶点夹角就能验证自己写对没有。3. Python turtle 手把手画五角星最小命令与三个必调参数3.1 一段能一次跑通的最小代码先画出来再调毛病import turtle t turtle.Turtle() t.speed(0) t.penup() t.goto(-100, 50) # 预置起点避免画布边缘裁剪 t.pendown() t.pensize(3) t.color(black, gold) t.begin_fill() for _ in range(5): t.forward(200) t.left(144) t.end_fill() t.hideturtle() turtle.done()逻辑说明循环 5 次的forward(200)画五条等长边每次left(144)把笔尖方向往内翻转走完 5 步后回到起点形成封闭自交五边形。如果你把range(5)改成range(6)多出来的一条边会重叠在第一边上看起来像“画了两遍”填充时还会出现奇怪的镂空。penup/goto是为了让起始位置不要落在画布正中央偏下处——很多人的星被窗口底部截掉一半不是代码错了是没给起笔位置留余量。几个关键参数speed(0)表示最快速度避免动画拖沓调试时用speed(3)更能看清方向变化pensize(3)控制线条粗细导出的 SVG/PDF 图里线条会加粗建议先设小再调color(black, gold)第一个是边框色第二个是填充色。begin_fill之前不设填充色end_fill不会生效。跑完这段如果你得到一个“倒着的、尖朝下”的星很正常——turtle 的默认朝向是右方0°起始角度直接决定了星星朝向。后面会讲怎么转正。3.2 让星星朝上初始方向与旋转角度的关系turtle 初始朝向是东0°而常见的星标要求尖角朝上90°。两种改法t.setheading(90) # 直接朝上 # 或 t.left(90) # 顺时针移动90°t.seth(90 - 90) # 等价写法seth(0)再配合每次t.left(144)也能得到朝左的星你要是想五角星每个顶点带圆角或星标倾斜例如某徽章里星标旋转 18°就把整体旋转值写进顶点公式里不必在 turtle 层做坐标平移。实际操作里我更建议用第二章的star_vertices()配合turtle.goto(x, y)逐点连线因为这样能精确控制每个顶点的位置而forward(200)的写法只适合验证算法。3.3 画出空心的五角星轮廓把填充换成 stroke很多人以为“画星”必须begin_fill其实在多数 UI 场景里只要线条轮廓不要填充。做法是去掉begin_fill/end_fill并把颜色统一为单一色for _ in range(5): t.forward(120) t.left(144)这样得到轮廓后如果想做“双线效果”外圈粗线 内圈细线可以缩小一点再画一遍但要注意两次起笔位置平移的计算——通俗做法是先用penup,goto(新坐标),pendown再执行同一组循环。这一段不展开因为后面会讲更优的批量方案。3.4 必调的 5 个参数决定星星好不好看参数作用推荐起点调试方向forward(边长)控制整体大小100~250画布宽度不足则缩小left(144)控制角度写错就变成五边形/六边形144° 不要改改 72° 画正五边形改 120° 画三角星speed()显示速度0最快调试用 3~6pensize线条粗细2~4输出图片时调整setheading(90)初始朝向90°朝上0° 朝右270° 朝下这里最需要强调的是边长是唯一决定绝对大小的参数粗细与填充不改变星形几何而角度一旦不是 144°即使边长不变画出来的图形区域会错位甚至不封闭。所以“调参”的核心是角度与边长配比其他的都能靠肉眼判断。4. 不只有 Python用 CAD、SVG、Canvas 画五角星的另一种思路4.1 图形学与 GUI 场景SVG 里的五角星路径生成Python turtle 适合教学与验证算法但在真实项目里前端 Web 图标、设计稿切图、Canvas 渲染通常直接用 SVG 的polygon标签。五角星的十个顶点同样来自第二章的公式只不过换算成像素坐标后直接拼字符串。// 生成SVG polygon 的点串 function starPoints(cx, cy, R, r, rotDeg) { const pts []; for (let i 0; i 10; i) { const rad i % 2 0 ? R : r; const deg i * 36 rotDeg; const x cx rad * Math.cos(deg * Math.PI / 180); const y cy rad * Math.sin(deg * Math.PI / 180); pts.push(x.toFixed(2) , y.toFixed(2)); } return pts.join( ); } const svgStar polygon points${starPoints(200, 200, 180, 75, -90)} fillgold strokeblack stroke-width3/;逻辑说明rotDeg取-90是因为 SVG 的 y 轴朝下想要尖角朝上就得让第一个点落在正上方。你在 Canvas 里画星星也是同一个公式画到ctx.beginPath()后用moveTo/lineTo依次连点。很多前端新手在这里犯的错是直接ctx.moveToctx.lineTo连 5 个外顶点画出来的是一个正五边形——因为他们忘掉中间还要插入一个r半径的内顶点。实际调试建议先在浏览器控制台console.log(starPoints(...))看输出点串再用 SVG 渲染。如果发现点串排序不对多半不是公式问题而是起始角度和rotDeg的叠加方向算反了。4.2 CAD 制图中的星形绘制不用代码但参数逻辑相同工程制图里画五角星一般不写代码而是用 CAD 软件里的“多边形POLYGEN”功能先画一个正五边形再用直线连接不相邻的顶点最后修剪多余线段。这里有一个参数背后的几何事实能帮助排查正五边形的边长s与外接圆半径R的关系是s 2R * sin(36°)CAD 里你给的多边形半径是外接圆半径不是内切圆半径。常见参数对应CAD 输入含义常见误设POLYGON边数输入 5填 10 会得到十边形外切圆 / 内接圆选外接圆模式选了内切圆模式得到星体偏小圆心点决定星的中心选错到边中点整体偏移旋转角0° 朝右90° 朝上默认 0° 画出来尖朝右如果需要精准对齐例如把星标放到某个圆的圆心直接在 CAD 里用“圆心捕捉”拾取再用旋转命令旋转 18° 让尖角朝上。这种操作的本质和代码里rotDeg参数完全一致只是界面层叫法不同理解一种场景另一种就通了。4.3 批量生成把星形函数丢进设计系统里如果项目需要一次性输出 30 个不同大小、不同旋转角度的星形图标不要让设计师手动摆写个脚本循环生成 SVG 文件更可靠。以 JavaScript 为例const fs require(fs); for (let i 0; i 30; i) { const size 50 i * 5; const rot i * 12; const star polygon points${starPoints(120, 120, size, size * 0.382, rot)} fill#f0c040 /; fs.writeFileSync(star_${i}.svg, svg xmlnshttp://www.w3.org/2000/svg width240 height240${star}/svg); }这段代码的逻辑说明size * 0.382保证内半径随外半径等比例缩放不会出现大星胖、小星瘦的畸变rot依次递增 12°让所有星星朝向不同角度适合做装饰底纹或 Loading 动画素材。前端的 Canvas 也能用同一套思路只是把写文件换成ctx.save()/ctx.restore()ctx.rotate(rot)注意每次画完要复位变换矩阵否则下一个星的旋转会叠加。5. 五角星绘制的常见翻车现场五个必踩的坑与排查方法5.1 现象画出来是“歪的”尖角没有朝上原因turtle默认朝向是东0°forward(200)走的是水平方向导致整个星形水平放置而不是竖直。排查与解决先确认你的视觉标准——工程里星形默认尖朝上但一些 UI 设计里也会故意让尖朝右。如果是需要朝上在循环开始前加一句t.setheading(90)。如果加了还是歪的看看是不是写成了t.setheading(0)或者t.right(90)右转会朝下左转才朝上。兜底方案干脆不用 turtle 的方向控制用第二章的star_vertices()算好绝对坐标然后t.goto(x, y)逐点连线。坐标法无论如何都朝向可控适合需要精确对齐的场景。5.2 现象画出来的图形是正五边形或者六顶点不是五角星原因循环里用了72°或对range(6)做了循环转向有的教程把144°错写成72°有的是把range(5)写成了range(6)。排查把转向值打印出来144 * 5 720刚好是 360° 的两圈说明能闭合72 * 5 360只转了一圈所以闭合时方向回到起点但角度位置不对只能画成五边形。如果循环 6 次且转向 144°总转角 864°取余 360° 等于 144°图形会多绕两周最后重叠出奇怪形状。解决严格用for _ in range(5)left(144)的组合二者缺一不可。5.3 现象画完填充颜色时星形内部出现白色镂空或填充错位原因begin_fill()和end_fill()之间的路径必须闭合且绕行方向一致。如果你在循环里额外增加了一次penup/goto填充区域会被分割成多个子路径填充算法按“非零环绕规则”计算部分区域会留下未填充的空隙另外如果路径起点与终点不完全重合比如边长差小于一像素也会产生视觉缝隙。排查先关掉填充去掉 begin_fill/end_fill看轮廓是否闭合再检查循环结束后笔尖位置是否精确落在起点最后确认没有在循环内部使用penup()若必须移动应绘制多条子路径并分别填充。解决最简单方案是不用填充改为线条图或者保证单个路径一笔完成不要跳点。5.4 现象星星太大被画布边缘裁剪只看到一半原因turtle.screensize()默认画布宽度约 400 像素而你forward(300)往右上方延伸远超出可显示范围特别是设置了setworldcoordinates时坐标范围被限制后会立即裁剪。排查打印t.xcor()和t.ycor()看最大横纵坐标是否超出窗口边界。若输出坐标正常但显示不全说明是窗口大小问题若坐标本身就异常说明你用的边长过大或初始点离中心太远。解决把边长缩小到 150 以内或用turtle.setup(width800, height800)增大画布。更通用做法是先根据画布尺寸动态计算边长side min(screen.window_width(), screen.window_height()) * 0.3保证任何分辨率下都不会溢出。5.5 现象批量生成 SVG 时星星位置错乱有的在左上角有的在右下角原因SVG 坐标系原点在左上角y 轴向下如果你第一次生成的starPoints使用数学坐标系y 轴向上的公式旋转方向会反顶点坐标变成向下延伸。批量循环时若圆心参数没变多个星会叠在一起。排查输出第一个点的坐标看是否与圆心相对位置符合预期如果第一个点比圆心 y 值小更靠上说明 y 方向公式方向对了如果比圆心 y 值大说明方向反了需要把sin取负即-Math.sin(angle)。解决统一使用y cy - r * Math.sin(angle)这种“屏幕坐标版”公式y 向下为正同时确保每次生成前cx, cy是当前星星的中心不要用一个递增偏移量叠加到旧坐标上否则会在循环中产生漂移。6. 进阶画会转的星星、做星星群和一条鲜有人提到的“轮子”技巧当你能稳定画出单个标准五角星后再往前一步就是动画与批量组合。最常见的需求是让星星绕自身中心旋转。在turtle里可以这样实现import turtle import math screen turtle.Screen() t turtle.Turtle() t.speed(0) t.hideturtle() R 100 r R * 0.382 for frame in range(60): t.clear() t.penup() angle_offset frame * 6 # 每帧旋转6度 for i in range(10): rad R if i % 2 0 else r angle math.radians(i * 36 angle_offset) x rad * math.cos(angle) y rad * math.sin(angle) t.goto(x, y) t.pendown() t.penup() turtle.update()代码说明用t.clear()清除上一帧画面每帧重新按旋转角度计算 10 个顶点并连线帧循环 60 次就能形成一个 360° 旋转周期。注意penup()与pendown()的时机——先penup()移动到第一个顶点再pendown()开始连线避免画出起始点到原点的轨迹。做“星空背景”时我一般会随机生成上百个星形按照距离给不同的大小和旋转速度。这时不能用turtle一帧帧重绘全部性能扛不住改用tkinter.Canvas直接绘制到内存图片用PhotoImage逐帧换图会流畅很多。这个差异在星星数量超过 50 时非常明显属于实际项目中一定要提前考虑的优化点。还有一个容易被忽略的好用技巧五角星可以当“描边器”。把任意多边形路径的顶点每隔一个取出来交替使用大半径小半径的圆点连线就能把星形轮廓变成带内缩的效果——也就是做徽章、印章图形时通常手工拉曲线的活用代码几行就能批量生成。我曾帮某设计团队把所有图标做成双色镂空风格就是用这套方法对五角星轮廓做了内外双重偏移做了 30 个版本让客户挑。后来我自己复盘最值钱的经验其实是一句话画星形不要死磕 turtle 的方向控制一定要用绝对坐标算好顶点再决定是画线、填色还是转起来——方向控制是给人看的绝对坐标才是给程序用的。希望帮到你。本文还有配套的精品资源点击获取
