Glyph WidgetsGlyph Widgets
工具关于联系博客隐私条款移除广告在Ko-fi上支持

© 2026 Glyph Widgets LLC. 保留所有权利。

·

100% 客户端处理

开发者
文本和写作
图像和颜色
媒体
网络和SEO
实用工具
隐私与安全
计算器
  1. 首页
  2. 图像和颜色
  3. 图像工具
  4. 无缝图案生成器

无缝图案生成器

最后更新:2026年3月11日

上传平铺图像,在可配置画布上生成无缝平铺预览。调整平铺缩放、旋转、间距,并选择多种平铺模式。导出为 PNG 或复制 CSS 背景代码片段。100% 客户端处理。

功能

  • ▶通过拖放或点击浏览上传瓷砖图像
  • ▶在可配置画布上实时无缝平铺预览
  • ▶瓷砖缩放从25%到400%可调
  • ▶旋转控制从0到360度
  • ▶瓷砖间隙和间距控制(0-50px)
  • ▶多种平铺模式:普通网格、半砖偏移、对角线、镜像
  • ▶自定义画布大小最高4096x4096像素
  • ▶导出为PNG或复制CSS背景代码片段
  • ▶画布背景颜色选择器
  • ▶100%客户端处理::图像永不离开您的浏览器
  • ▶Tile opacity and 16 blend modes for compositing control
  • ▶Randomization: per-tile offset and rotation with seeded PRNG for organic patterns
  • ▶Custom canvas size up to 4096x4096 pixels
  • ▶Export as PNG or copy CSS background snippet
  • ▶Background color picker for the canvas
  • ▶100% client-side processing : images never leave your browser

如何使用此工具

1

上传瓷砖图像

拖放或点击上传您想用作重复瓷砖的图像。支持的格式包括PNG、JPG、SVG和WebP。

2

选择平铺模式

从普通网格、半砖偏移(如砖砌)、对角偏移或镜像平铺中选择,以更改瓷砖的排列方式。

3

调整设置

使用控件微调瓷砖缩放、旋转角度、间隙间距、画布尺寸和背景颜色。

4

预览图案

画布会随着设置更改实时更新,精确显示平铺图案的效果。

5

导出

将图案下载为PNG图像,或复制CSS背景代码片段以用于您的网页项目。

基于Canvas的瓷砖渲染

该工具使用HTML5 Canvas API在可配置的画布上反复绘制您的瓷砖图像。每个瓷砖都被单独定位和变换,以最大程度地控制图案布局。

平铺模式

  • -普通网格模式将瓷砖放置在无偏移的规则网格中。
  • -半砖模式将每隔一行移动半个瓷砖宽度,形成砖砌图案。
  • -对角线模式对每行应用渐进偏移,形成倾斜平铺效果。
  • -镜像模式在相邻瓷砖上交替进行水平和垂直翻转,创建对称图案。

缩放与旋转

缩放控件将每个瓷砖从原始大小的25%调整到400%。旋转在每个瓷砖的中心周围应用变换,允许0到360度的任意角度。两种变换都使用Canvas变换操作以实现清晰渲染。

CSS导出

CSS导出会创建一个单瓷砖画布,以当前的缩放和旋转设置渲染瓷砖,将其转换为数据URI,并生成带有适当background-repeat和background-size值的background-image CSS属性。

客户端处理

所有图像处理都完全在您的浏览器中使用Canvas API进行。您的图像永远不会上传到任何服务器,确保完全隐私。工具加载后可离线使用。

常见问题

您可以上传任何浏览器支持的图像格式,包括PNG、JPG、JPEG、SVG、WebP、GIF和BMP。建议使用PNG格式的透明瓷砖。

相关工具

Color Picker

Pick colors from your screen or input values in any format

Contrast Checker

Check WCAG color contrast ratios for accessibility compli...

Color Converter

Convert colors between HEX, RGB, HSL, HSB, and CMYK formats

平铺来源

图案预览

预览网格:

上传平铺图像或选择内置形状以查看图案预览

控制

#ffffff
×

颜色控制

Pattern Randomization is a Supporter feature.

Saved Presets is a Supporter feature.

Tool History is a Supporter feature.

Tool Notes is a Supporter feature.

分享