✨ 项目介绍
在日常办公、项目演示、文档生成等场景中，我们常常会看到各种红色印章效果。于是我用 原生 HTML + JavaScript + Canvas 编写了一个可调属性的印章生成器，不仅支持常规的弧形文字和中心图案，还可以一键实现“做旧”、“遮盖”和“拖影”三种视觉磨损效果。
🧩 项目亮点：
-
可自定义文字、字体大小、字体粗细、字体类型、颜色、角度等
-
自动绘制中心图案与红色外圈
-
一键做旧，生成裂纹、污渍、褪色等视觉特效
-
可自行选择是否在下方出现小字
-
可下载为 PNG 图片
👉 在线预览地址：印章生成器
👉 GitHub源码地址：https://github.***/lilixixixix/seal
📷 效果截图
🛠 技术实现
项目完全使用原生前端技术构建：
-
HTML：用于结构和输入表单； -
Canvas API：用于绘图，包括文字沿弧绘制、中心图案、边框等； -
JavaScript：处理用户交互、图形绘制逻辑、做旧算法和图像导出等。
1️⃣ 弧形文字绘制
核心逻辑如下：
for (let i = 0; i < textLength; i++) { const angle = startAngle + i * angleStep; const x = textRadius * Math.cos(angle); const y = textRadius * Math.sin(angle); ctx.save(); ctx.translate(x, y); ctx.rotate(angle + Math.PI / 2); // 保证文字正立 ctx.fillText(chars[i], 0, 0); ctx.restore(); }
2️⃣ 做旧效果实现
通过以下方式增强印章的真实感：
-
随机擦除遮罩（圆形渐变）；
-
添加噪点像素；
-
随机生成裂痕路径；
-
局部颜色淡化。
3️⃣ 遮盖与拖影
-
遮盖效果使用不规则多边形进行颜色模糊；
-
拖影使用 canvas 分块叠加实现，并结合透明度和随机位移。
🧪 项目使用方法
-
下载源码：
https://github.***/lilixixixix/seal
-
双击
seal.html打开即可使用； -
输入印章文字，调整参数，点击“生成”按钮；
-
可选点击“做旧”、“遮盖”、“拖影”增强视觉；
-
点击“下载”保存为图片。
📌 使用场景
-
电子文档演示、项目封面
-
教学演示、图像处理练习
-
签名模拟、PPT 点缀
📋 后续优化方向
-
增加字体下拉选择、背景纸张样式；
-
支持导出 SVG 向量图；
-
引入 Web 字体，让字体更仿真；
-
增加移动端适配和拖拽微调。
🙋♂️ 总结
这个小项目是一个非常有趣的前端练习，也可以作为教学案例，展示 Canvas 图形绘制、用户交互和图像处理的完整流程。如果你喜欢这个项目，欢迎 Star ⭐ 支持！
📦 GitHub 源码：
👉 https://github.***/lilixixixix/seal
欢迎 Fork 和提出改进建议！
