Turtletoy 是一个优秀的浏览器端龟图引擎，完全基于纯 JavaScript 和 HTML Canvas 实现 Logo 风格的龟图编程。它摒弃了复杂依赖，通过极简 API 让开发者在浏览器中即时创建生成艺术，支持代码高尔夫竞赛、实时动画预览和社区分享。这种轻量级设计不仅降低了门槛，还确保了输出兼容物理绘图仪（plotter），是 Web 生成艺术领域的典范。
核心机制是 “全局代码 + walk 循环”。全局代码执行一次，用于初始化龟对象、设置画笔和位置。例如，创建一个龟并定位：
const turtle = new Turtle();
turtle.penup(); // 抬笔，避免初始线条
turtle.goto(-50, -20); // 绝对定位到 (-50, -20)
turtle.pendown(); // 落笔开始绘图
随后定义 walk 函数，它接收迭代计数 i（从 0 开始递增），每次调用执行一步动作，直至返回 false 停止。Canvas 每约 100 次调用（~16ms）更新一次，实现流畅动画效果。例如，五角星绘制：
function walk(i) {
turtle.forward(100); // 前进 100 像素
turtle.right(144); // 右转 144 度
return i < 4; // i<4 时继续
}
这种分离设计确保响应性：复杂计算分步进行，避免阻塞 UI。证据来自官方语法文档，强调 walk 用于渐进渲染，适合浏览器环境。
关键 API 聚焦移动、转向和状态查询，支持克隆多龟协同绘图：
- 移动：
forward(distance)/fd()前进，backward(distance)/bk()后退，goto(x,y)/setpos()绝对位移（落笔绘线），jump(x,y)/jmp()瞬移（无线）。 - 转向：
right(angle)/rt()、left(angle)/lt()，默认度数，可用degrees(360)或radians()切换。setheading(angle)/seth()绝对朝向，home()归零。 - 高级：
circle(radius, extent, steps)画弧 / 圆，clone()复制龟。 - 画笔：
pendown()/pd()/down()、penup()/pu()/up()。 - 查询：
pos()返回 [x,y]，heading()/h()朝向，isdown()笔状态。
单位全像素，坐标系原点居中，方形 Canvas。角度默认 360 度全圆。实际落地时，参数需考虑 Canvas 尺寸（默认～400x400），前进距离宜 10-200 像素，避免溢出。
为工程化，Turtletoy 引入 “可调变量”（adjustable variables），通过特殊注释定义 UI 控件。声明如：
const grid = 11; // min=5, max=50, step=1 网格尺寸
const mode = 2; // min=0, max=2, step=1, (渐变, 涡流, 流场) 绘图模式
const path = `M57,61C-72,51 -23,-84 36,-67`; // type=path, 点击重绘路径
数值变量生成滑块，下拉需选项数匹配步长间隔；字符串用 type=string；路径添加绘图按钮。描述文本悬停提示，提升交互。全局设置 Canvas.setpenopacity(opacity)（-1~1，负值反转黑白），仅一次调用，确保一致性。
性能参数清单：
- 迭代上限：walk 中 i<1000，避免无限循环卡死浏览器。
- 步长优化：steps 在 circle 中自动计算，复杂图案设 32-128。
- 动画帧率：~60fps，~16ms/100 步，适合现代浏览器（Chrome/Edge/Firefox/Safari）。
- 内存监控：克隆龟 <10 个，SVG 导出前优化路径（UI 选项：拆分段、plotter 最小笔移 O (N^2)）。
- 回滚策略：复杂 walk 加
if (i > 5000) return false;防崩溃。
生成艺术应用中，Turtletoy excels 于 code golf：最小代码产复杂图案，如 L-system 分形、Truchet 瓷砖（社区标签）。实时预览 + 分享链接，便于竞赛评测。导出 SVG（带裁剪 / 作物标记 / 作者 info），尺寸 mm 单位，优化后笔迹连续最小化抬笔。
示例：参数化分形树，调整分支角 / 长度：
Canvas.setpenopacity(1);
const angle = 30; // min=20, max=60, step=5 分支角
const len = 120; // min=80, max=200, step=10 初始长
const turtle = new Turtle();
function branch(l, a) {
if (l < 5) return false;
turtle.forward(l);
const t1 = turtle.clone();
const t2 = turtle.clone();
turtle.left(a);
branch(l * 0.7, a);
turtle.back(l * 0.7);
turtle.right(a * 2);
branch(l * 0.7, a);
turtle.back(l * 0.7);
turtle.left(a);
turtle.back(l);
return true;
}
function walk(i) {
if (i === 0) {
turtle.left(90);
branch(len, angle);
}
return false;
}
调整 angle/len 实时变幻，导出 SVG 直送 plotter。风险：浏览器兼容旧版 Canvas 2D，重载计算（如 raytracer 标签）用 Worker 模拟，但平台无内置。
监控要点：社区浏览 newest/loved，标签 fractal (27)/lsystem (18)，点赞反馈流行度。分享策略：标题 / 描述 / 可见性设置，许可 CC-BY-NC-SA 4.0。
Turtletoy 证明：限制激发创意，轻量 Canvas 解释器完美平衡教育、艺术与工程。
资料来源：
- https://turtletoy.net/syntax (API 详解)
- https://turtletoy.net/about (设计理念)
- https://turtletoy.net/turtle/new (编辑器示例)