【新春创造营】马年挥毫写春联 - 自定义春联生成器
项目介绍
「马年挥毫写春联」是一个可视化春联生成器，支持用户自定义上联、下联、横批内容，选择字体、底纹和颜色样式，实时预览效果，并可将春联导出为高清 PNG 图片。
项目亮点：
-
避开常规静态春联展示，做可视化定制生成
-
支持完整春联导出，也支持上联、下联、横批分别导出
-
内置 50+ 春联库，支持一键随机生成
-
三种书法字体风格、三种春节底纹可选
-
纯 HTML/CSS/JS 单文件实现，无需后端
体验链接
使用到的 iFlow CLI 功能
在开发过程中，主要使用了以下 iFlow CLI 功能：
-
文件操作：创建项目文件夹、编写 index.html 文件
-
代码编辑：使用 replace 工具修改和完善代码
-
前端测试：使用 frontend-tester 验证页面功能和交互
-
任务管理：使用 todo_write 跟踪开发进度
实现过程
1. 项目结构
马年挥毫写春联/
└── index.html # 单文件实现全部功能
2. 核心功能实现
输入区设计
-
上联、下联限制 7 字，横批限制 4 字
-
实时字数统计和输入验证
-
内置 50+ 春联库，点击「随机生成」即可获取创意春联
样式选择系统
-
字体：楷书、行书、隶书（通过 CSS 模拟不同视觉效果）
-
底纹：红底金边、剪纸马纹、水墨祥云
-
颜色：金色、黑色、白色
实时预览
-
使用 CSS Flexbox 实现春联真实排版
-
上联在右、下联在左、横批居中
-
竖排文字使用
writing-mode: vertical-rl实现
图片导出
-
使用 Canvas API 绑制春联图片
-
支持完整春联导出（800x1000）
-
支持单个春联导出（上联 300x700、下联 300x700、横批 500x150）
-
导出时自动绘制对应的背景底纹
3. 技术要点
-
CSS 背景：使用渐变 + SVG 图案实现底纹效果
-
Canvas 绘制：动态绑制渐变背景、底纹图案和文字
-
响应式布局：移动端自适应 Grid 布局
-
事件驱动：输入和样式变更实时同步到预览区
截图展示
桌面端界面
移动端界面
导出效果示例
使用示例
随机春联示例
-
「上班摸鱼少，新年红包多，横批：心想事成」
-
「代码无bug，产品不改需求，横批：工作顺利」
-
「马年行大运，万事皆顺意，横批：阖家欢乐」
导出格式
-
完整春联：
马年春联_阖家欢乐.png -
单独上联：
上联_马年行大运.png -
单独下联：
下联_万事皆顺意.png -
单独横批：
横批_阖家欢乐.png
总结
这个项目是一个轻量级、零依赖的春联生成器，用户无需安装任何软件或注册账号，直接在浏览器中打开即可使用。无论是想要传统风格的春联，还是想要个性化的祝福语，都可以通过这个工具快速生成并下载。
项目完全使用 HTML/CSS/JS 实现，代码简洁易懂，方便二次开发或扩展新功能。春节期间和家人一起DIY专属春联，增添节日气氛！
必须是可用的项目