HTML美丽螺旋图生成器

💡 原文中文,约1500字,阅读约需4分钟。
📝

内容提要

该工具利用HTML和JS在Canvas上绘制螺旋图,灵感源自Lego Spirograph。用户可调节手臂速度、长度、偏移、缩放、加速/减速、画笔样式(彩色、彩虹、斑马等)和亮度,支持实时绘制、随机参数、暂停重绘及叠加绘图。参数保存在URL哈希中,便于书签保存与分享,生成图像可复现。

🔎

延伸解读

参数化绘图的可复现性

该工具将当前参数集和设置保存在URL哈希中,因此书签或分享链接能精确还原绘图起点、实时/非实时模式、加速度、画笔样式和亮度。这意味着同一链接在不同设备上生成的图像相同,适合保存和分享创作成果,也方便他人复现你的参数组合。

实时绘制与加速的取舍

实时绘图模式下,绘画臂缓慢移动,便于观察参数如何影响绘制过程;关闭实时绘图后默认加速50倍,最高可设500倍,能快速查看完整图形。加速只改变计算速度,不改变最终图像。若线条太细、太暗或太亮,可用加速/减速调整,通常会使线条更明亮。

叠加绘图与调色技巧

绘图达到起点会自动停止,此时可更改参数再按开始,新绘图会叠加在之前基础上。重绘前还能调色,从而组合不同形状和笔型。若图形过大或过小,用缩放功能调整;也可从随机生成器开始,关闭实时绘图快速预览,再用不同笔型测试并重绘。

❓

Q&A

这个HTML螺旋图生成器是什么?它有什么用途?

这是一个利用HTML和JS在Canvas上绘制螺旋图的工具,灵感源自Lego Spirograph。用户可以通过调节各种参数生成漂亮的螺旋图画,并支持实时绘制、随机生成、保存和分享。

如何调整螺旋图的绘制速度?

可以通过“加速/减速”功能重新计算手臂旋转速度来改变绘制速度,通常会使线条更明亮。另外,“加速度”参数指定每帧计算多少段,不会改变生成的图像,只是使速度更快,最高可设置为500倍。

螺旋图生成器支持哪些画笔样式?

支持多种画笔样式:C是彩色线条,R是彩虹,A是模拟,Z是斑马,Y是黄色。此外还可以增加额外的亮度,或使用Dim使画布50%透明。

如何保存和分享我生成的螺旋图?

当前的参数集和设置会反映在地址栏的URL哈希值中。只需将URL加入书签或保存,复制粘贴URL即可分享。使用该URL会以相同的设置(实时/非实时、加速度、钢笔样式、亮度)从起点开始绘制,因此生成的图像将是相同的。

实时绘图模式有什么作用?如何开启或关闭?

实时绘图模式下,绘画臂在旋转画布上绘画时会缓慢(或实时)移动,用户可以更改参数并实时查看结果。关闭实时绘图后,默认会加速50倍,以便快速查看整个绘图。用户可以通过界面上的“实时绘制”选项进行切换。

如果我想在已有绘图基础上继续叠加新的图形,应该怎么操作?

如果绘图达到起点会自动停止,此时可以更改一些参数(如画笔样式、颜色等),然后再次按下“开始”继续绘制,新的绘图就会在之前的基础上进行。这样可以将不同的形状和不同的笔型组合在一起。

🏷️

标签

➡️

继续阅读