UD5工具箱
OffscreenCanvas性能演示 - Worker中绘图对比
分别使用主线程Canvas和OffscreenCanvas在Worker中渲染动画，对比FPS和流畅度。
📖 常见问题
默认使用浏览器原生 BroadcastChannel API 实现同一浏览器多标签页之间的实时通信。打开多个标签页访问同一房间即可体验协作。如需跨设备协作，可通过
window.collabPaint.setWebSocketUrl('wss://你的服务器') 配置WebSocket中继服务器，实现真正的远程多人协作。
支持画笔（自由绘制）、橡皮擦（透明擦除）、直线、矩形、圆形/椭圆和文字工具。可通过顶部工具栏切换，也支持键盘快捷键（P/E/L/R/C/T）。颜色和线条粗细均可自定义。
在同一浏览器中打开两个或多个标签页，访问相同的房间ID（默认为"public"），即可看到实时协作效果。在一个标签页绘制，另一个标签页会同步显示。不同标签页的用户光标也会实时展示。
支持。使用 Ctrl+Z 撤销，Ctrl+Y 重做，或点击工具栏的撤销/重做按钮。画布最多保存40步历史记录。注意：撤销操作会在协作会话中广播，其他用户也会看到撤销效果。
完全支持。画板针对移动端触摸操作进行了优化，支持手指绘制、形状拖拽等操作。工具栏在移动端会自动缩小适配屏幕，确保在手机和平板上都能流畅使用。
渐变网格着色器 - 多点自由色渐变
在画布上放置多个色点，颜色平滑插值形成类似矢量网格渐变的梦幻背景。
Canvas 辅助线工具 - 为画布添加标尺和参考线
在 HTML5 Canvas 上叠加可拖拽的辅助线和标尺，帮助精确绘制和布局。
CSS 系统颜色演示 - Canvas/Window/Highlight 等
展示 CSS 系统颜色关键字（如 CanvasText, LinkText）在明暗模式下的实际渲染值。
点彩画效果生成器 - Voronoi格子点描风格
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
Tailwind 调色板可视化浏览器 - 所有色阶一览
可视化浏览 Tailwind CSS 所有内置颜色的 50-950 色阶，点击复制类名或色值。
BroadcastChannel同步器 - 同源跨标签页通信
打开多个同源页面，通过Broadcast Channel API实时同步消息或状态变化。
图片幻灯生成器 - 序列帧转视频WebM
上传一组图片，设定每张展示秒数和转场，生成WebM视频幻灯。
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
像素绘板 - 网格填色与动画帧
在可缩放网格上选区颜色绘制像素图，支持多帧预览简单动画。
Lottie动画预览器 - 拖放JSON查看动效
加载Lottie动画JSON文件，播放并控制速度、方向，预览动效效果。
Web App Manifest 图标预览 - 模拟主屏图标效果
上传图标文件并设置背景色，模拟在 Android/iOS 主屏幕上的添加效果，检查视觉适配。
图层混合模式演示 - 叠加/柔光等在线比较
上传两张图片，实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果
应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。
滚动驱动动画创作台 - 基于Scroll Timeline的可视化
配置滚动容器与目标元素，自定义随滚动触发的关键帧动画，输出纯CSS代码。
色盲友好调色板 - 定性数据配色推荐
展示几组在各类色盲下仍可区分的定性数据配色方案，含Hex码。
多尺寸Favicon导出器 - 生成全平台图标包
上传一张原图，智能裁剪并输出从16x16到512x512的各尺寸ICO/PNG，适合网页与PWA。
HTML5 视频字幕同步辅助工具 - 在线调整 WebVTT
加载视频和 VTT 字幕文件，允许全局偏移时间轴或逐条修改，实时预览同步效果。
Flexbox 高级演练场 - 所有属性可视化控制
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性，实时观察布局变化，理解弹性盒子。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
滚动驱动动画沙盒 - Animation Timeline演示
绑定动画进度到滚动位置，交互式调整参数，直观理解scroll-timeline和view-timeline。
复古终端样式生成器 - 绿色字符CRT效果
生成具有扫描线、荧光拖影和屏幕弯曲效果的纯CSS复古电脑终端样式。
Web Share API 实践器 - 调用系统分享对话框
触发系统原生分享，支持分享文本、链接与文件，检查浏览器兼容性与支持级别。
SVG 精灵图合并工具 - 多个 SVG 图标合成一张
上传多个 SVG 文件，合并为一个 SVG sprite 并生成使用示例代码，减少 HTTP 请求。
CSS兼容性速查 - 属性在各浏览器支持图表
搜索CSS属性，显示其在主流浏览器的支持范围和前缀需求，快速避免踩坑。
无障碍多选下拉框生成器 - 复选框风格
创建带有复选框或标签的多选下拉列表，支持删除已选项，键盘可全控。
Flexbox属性速查 - 可视对照表
可视化Flexbox容器和子项的所有属性及选项，鼠标悬停预览效果。
Oklch调色板生成器 - 感知均匀色彩搭配
在Oklch色彩空间中生成均匀色阶、类比色和互补色方案，确保视觉一致性。
环境贴图查看器 - 等距柱状投影交互旋转
加载 HDR 或普通全景图，以 3D 天空盒方式旋转查看。