UD5工具箱
实时协作画板 - 通过WebSocket同步
基于简单WebSocket服务，多人同时在同一画布上绘图，远程协作。
OffscreenCanvas 性能演示
Worker 渲染 主线程渲染
运行中
粒子: 1000
主线程渲染
60 FPS
Worker 线程渲染
(OffscreenCanvas)
60 FPS
性能差异：
--
Worker 帧耗时优势：
--
控制面板
快速预设：
相关知识点
什么是 OffscreenCanvas？
OffscreenCanvas 允许在 Web Worker 中执行 Canvas 渲染操作，将绘图计算从主线程分离，避免阻塞 UI 响应。通过 canvas.transferControlToOffscreen() 将控制权转移至 Worker。
为什么 Worker 渲染更流畅？
主线程需要同时处理 DOM 事件、样式计算、布局等任务，繁忙时会导致渲染掉帧。Worker 独立运行，不受主线程负载影响，确保 Canvas 渲染持续流畅。
适用场景有哪些？
复杂数据可视化、游戏引擎、实时图表、图像处理、粒子特效等需要大量绘图的场景，使用 OffscreenCanvas 可显著提升用户体验。
Web Worker 质数搜索器 - 不阻塞界面计算
在后台 Worker 中计算大范围内的质数，主线程实时绘制进度条，展示多线程优势。
Animation Worklet 演示 - 基于工作线程的高性能动画
创建并运行动画工作线程，展示不受主线程影响的平滑动画效果。
Canvas 辅助线工具 - 为画布添加标尺和参考线
在 HTML5 Canvas 上叠加可拖拽的辅助线和标尺，帮助精确绘制和布局。
滚动驱动动画创作台 - 基于Scroll Timeline的可视化
配置滚动容器与目标元素，自定义随滚动触发的关键帧动画，输出纯CSS代码。
Flexbox 高级演练场 - 所有属性可视化控制
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性，实时观察布局变化，理解弹性盒子。
CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果
应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。
CSS 系统颜色演示 - Canvas/Window/Highlight 等
展示 CSS 系统颜色关键字（如 CanvasText, LinkText）在明暗模式下的实际渲染值。
滚动驱动动画沙盒 - Animation Timeline演示
绑定动画进度到滚动位置，交互式调整参数，直观理解scroll-timeline和view-timeline。
Iterator Helpers 演示 - map/filter/take 在迭代器上的应用
使用新的迭代器辅助方法链式处理数据，查看懒求值效果。
Webpack 打包分析器 - stats.json 可视化
上传 webpack 的 stats.json，生成交互式树状图、模块大小排名，辅助优化构建体积。
CSS 伪类效果测试场 - 实时查看 :is() :where() :has()
编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
Periodic Sync 事件模拟器 - 手动触发并查看结果
在开发环境中模拟 periodicSync 事件，触发后查看 SW 中的处理逻辑和网络请求。
懒加载代码生成 - IntersectionObserver
生成使用Intersection Observer实现图片懒加载的JavaScript代码，含过渡动画。
Web Worker 代码生成器 - 快速创建独立线程脚本
编写主线程和 Worker 内的逻辑模板，自动生成分离的 JS 文件代码，加速 Worker 开发。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
复古终端样式生成器 - 绿色字符CRT效果
生成具有扫描线、荧光拖影和屏幕弯曲效果的纯CSS复古电脑终端样式。
SharedArrayBuffer 通信演示 - 跨 Worker 共享内存
在主线程和 Worker 之间使用 SharedArrayBuffer 和 Atomics 进行同步通信。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
Catmull-Clark 细分曲面演示 - 控制网格迭代
载入简单控制网格，执行 Catmull-Clark 细分一次，观察光滑效果。
Tailwind 调色板可视化浏览器 - 所有色阶一览
可视化浏览 Tailwind CSS 所有内置颜色的 50-950 色阶，点击复制类名或色值。
悬停提示框生成器 - 纯CSS/JS气泡样式定制
选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。
新拟态设计生成器 - CSS Neumorphism样式代码
调节光源角度、颜色和距离，生成凹凸柔和的新拟态UI元素CSS盒阴影代码，潮流设计工具。
Brainfuck在线解释器 - 步进调试
编写Brainfuck代码，以可视化的方式步进执行，观察活动纸带和指针。
Web Worker计算演示 - 后台斐波那契不卡顿
在主线程和Worker中分别计算大斐波那契数，对比界面的响应度。
CSS overscroll-behavior 演示 - 控制滚动链接效果
切换 overscroll-behavior 属性值，观察嵌套滚动容器到达边界时的不同行为。
Flexbox属性速查 - 可视对照表
可视化Flexbox容器和子项的所有属性及选项，鼠标悬停预览效果。
Three.js 场景在线编辑器 - 拖拽添加模型和灯光
在浏览器中构建 3D 场景，添加基本几何体、光源，导出场景代码。
滚动驱动动画生成器 - Scroll-timeline代码
配置基于滚动位置触发的CSS @scroll-timeline动画，复制适配代码。