UD5工具箱
实时协作画板 - 通过WebSocket同步
基于简单WebSocket服务，多人同时在同一画布上绘图，远程协作。
OffscreenCanvas性能演示 - Worker中绘图对比
OffscreenCanvas 性能演示
Worker 渲染 主线程渲染
运行中
粒子: 1000
主线程渲染
60 FPS
Worker 线程渲染
(OffscreenCanvas)
60 FPS
性能差异：
--
Worker 帧耗时优势：
--
控制面板
快速预设：
相关知识点
什么是 OffscreenCanvas？
OffscreenCanvas 允许在 Web Worker 中执行 Canvas 渲染操作，将绘图计算从主线程分离，避免阻塞 UI 响应。通过 canvas.transferControlToOffscreen() 将控制权转移至 Worker。
为什么 Worker 渲染更流畅？
主线程需要同时处理 DOM 事件、样式计算、布局等任务，繁忙时会导致渲染掉帧。Worker 独立运行，不受主线程负载影响，确保 Canvas 渲染持续流畅。
适用场景有哪些？
复杂数据可视化、游戏引擎、实时图表、图像处理、粒子特效等需要大量绘图的场景，使用 OffscreenCanvas 可显著提升用户体验。
滚动驱动动画创作台 - 基于Scroll Timeline的可视化
配置滚动容器与目标元素，自定义随滚动触发的关键帧动画，输出纯CSS代码。
Flexbox 高级演练场 - 所有属性可视化控制
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性，实时观察布局变化，理解弹性盒子。
滚动驱动动画沙盒 - Animation Timeline演示
绑定动画进度到滚动位置，交互式调整参数，直观理解scroll-timeline和view-timeline。
Webpack 打包分析器 - stats.json 可视化
上传 webpack 的 stats.json，生成交互式树状图、模块大小排名，辅助优化构建体积。
CSS 伪类效果测试场 - 实时查看 :is() :where() :has()
编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
懒加载代码生成 - IntersectionObserver
生成使用Intersection Observer实现图片懒加载的JavaScript代码，含过渡动画。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
复古终端样式生成器 - 绿色字符CRT效果
生成具有扫描线、荧光拖影和屏幕弯曲效果的纯CSS复古电脑终端样式。
SharedArrayBuffer 通信演示 - 跨 Worker 共享内存
在主线程和 Worker 之间使用 SharedArrayBuffer 和 Atomics 进行同步通信。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
悬停提示框生成器 - 纯CSS/JS气泡样式定制
选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。
新拟态设计生成器 - CSS Neumorphism样式代码
调节光源角度、颜色和距离，生成凹凸柔和的新拟态UI元素CSS盒阴影代码，潮流设计工具。
Brainfuck在线解释器 - 步进调试
编写Brainfuck代码，以可视化的方式步进执行，观察活动纸带和指针。
Web Worker计算演示 - 后台斐波那契不卡顿
在主线程和Worker中分别计算大斐波那契数，对比界面的响应度。
Flexbox属性速查 - 可视对照表
可视化Flexbox容器和子项的所有属性及选项，鼠标悬停预览效果。
滚动驱动动画生成器 - Scroll-timeline代码
配置基于滚动位置触发的CSS @scroll-timeline动画，复制适配代码。
<dialog> 模态框设计向导 - 原生对话框样式器
自定义原生 <dialog> 元素的样式、动画和遮罩效果，一键复制生成语义化且无障碍的模态框代码。
CSS属性兼容性表格 - 按使用率排序
搜索CSS属性和选择器，展示在主流浏览器的支持版本和全局使用率百分比。
颜色对比度实时分析器 - 多标准WCAG AA/AAA检测
支持任意格式颜色输入，计算对比度并显示WCAG 2.1各级别通过情况，含颜色建议。
屏幕唤醒锁测试器 - 保持常亮应用演示
请求Screen Wake Lock防止屏幕关闭，监听释放事件，适用于观看长内容等场景。
Web App Manifest 图标预览 - 模拟主屏图标效果
上传图标文件并设置背景色，模拟在 Android/iOS 主屏幕上的添加效果，检查视觉适配。
CSS混合模式实演 - background-blend-mode
选择多张图片或纯色叠加，切换所有CSS混合模式并实时预览图层效果。
CSS兼容性速查 - 属性在各浏览器支持图表
搜索CSS属性，显示其在主流浏览器的支持范围和前缀需求，快速避免踩坑。
CSS Flexbox交互演示 - 在线弹性布局学习
拖拽调节Flex容器和子项属性，即时可视化响应效果，同时显示CSS代码，边学边用。
Web Share API 实践器 - 调用系统分享对话框
触发系统原生分享，支持分享文本、链接与文件，检查浏览器兼容性与支持级别。
Cookie同意横幅配置器 - GDPR/CCPA 自定义样式
实时预览并生成符合隐私法规的Cookie同意横幅HTML/CSS/JS代码，一键嵌入网站。
图层混合模式演示 - 叠加/柔光等在线比较
上传两张图片，实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
ASCII STL查看器 - 3D模型线框显示
加载文本格式的STL模型文件，以线框形式旋转查看它的三维结构。