UD5工具箱
Canvas
HTML5 Canvas是HTML标准中提供的一个可编程的位图绘图区域，开发者可以通过JavaScript在Canvas上绘制图形、处理图像和动画。本工具使用Canvas API实时渲染渐变纹理，所有绘制操作在浏览器本地完成，无需服务器参与，保证了响应速度和数据安全。
线性渐变（Linear Gradient）
线性渐变是一种沿直线方向从一种颜色过渡到另一种颜色的渐变方式。通过设定起始点、终止点和角度，可以控制渐变的方向和分布。在线性渐变中，颜色沿直线均匀或非均匀地过渡，是网页设计中最常用的渐变类型之一，常用于按钮背景、卡片装饰和页面Banner。
径向渐变（Radial Gradient）
径向渐变是从一个中心点向外围扩散的渐变方式，颜色从中心向外呈圆形或椭圆形过渡。通过调整中心点位置和扩散半径，可以创造光晕、聚光灯等视觉效果。径向渐变常用于制作头像背景、光效装饰和聚焦引导等设计元素。
锥形渐变（Conic Gradient）
锥形渐变是围绕中心点旋转的渐变方式，颜色沿角度方向依次过渡，类似色轮的效果。通过设定起始角度和旋转方向，可以制作饼图背景、雷达扫描效果和彩色环形装饰。锥形渐变在传统CSS中支持有限，本工具通过Canvas提供了完整的锥形渐变渲染能力。
颜色停止点（Color Stop）
颜色停止点定义了渐变中颜色发生变化的关键位置。每个停止点包含两个属性：颜色值（决定该位置的颜色）和位置百分比（决定该颜色在渐变轴上的位置）。通过合理设置多个停止点，可以创造出复杂的多色渐变效果。停止点越多、分布越精细，渐变过渡就越丰富和细腻。
纹理叠加（Texture Overlay）
纹理叠加是在基础渐变图像之上额外添加一层纹理图案的处理方式。常见的纹理类型包括噪点、条纹、网格和点阵。纹理叠加可以打破纯渐变的平滑感，为背景增添质感、层次和视觉趣味。在本工具中，纹理叠加由Canvas程序化生成，无需外部纹理图片。
噪点纹理（Noise Texture）
噪点纹理是一种通过随机像素点模拟自然材质表面细微凹凸的纹理效果。在渐变背景上叠加细微噪点，可以模拟纸质、磨砂或胶片颗粒等质感，避免纯色渐变显得过于光滑和数字化。噪点密度和强度可调，适用于需要温暖质感的设计场景。
平铺（Tiling）
平铺是将一个纹理图案在水平和垂直方向上重复排列形成连续背景的技术。在网页设计中，平铺常用于制作无缝背景纹理。本工具的2x2平铺预览功能帮助用户检查纹理在重复排列时的拼接效果，确保相邻纹理边缘自然过渡，不会出现明显的接缝或不协调区域。
PNG导出
PNG（Portable Network Graphics）是一种无损压缩的位图格式，支持透明度，广泛用于网页图像和设计素材。本工具支持导出当前Canvas尺寸的PNG图片和2048x1280的2K高分辨率PNG图片。PNG格式保留了渐变的全部色彩细节，适合用于印刷、大屏显示和高质量网页背景。
CSS渐变代码
CSS渐变代码是使用CSS3标准的linear-gradient、radial-gradient或conic-gradient函数编写的样式代码，可直接嵌入网页的background属性中使用。本工具自动生成与当前渐变设置对应的CSS代码，用户一键复制即可应用到网页中。需要注意的是，CSS代码仅包含渐变部分，不支持噪点等Canvas特有的纹理叠加效果。
预设方案（Preset）
预设方案是工具内置的预先配置好的渐变纹理模板，包含特定的渐变类型、颜色组合、参数设置和纹理叠加选项。用户选择一个预设后，所有配置会自动应用到画布上。预设方案降低了设计门槛，帮助初学者快速获得专业效果，也适合有经验的设计师作为创作起点。