打造一个现代化的 Web 涂鸦画板

最新推荐文章于 2025-11-23 23:13:13 发布

原创最新推荐文章于 2025-11-23 23:13:13 发布 · 1.1k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#前端

Web 专栏收录该内容

6 篇文章

订阅专栏

打造一个现代化的 Web 涂鸦画板 ✨

一个轻量级、高性能的在线绘画应用，支持桌面和移动端，让创意随时随地释放！

🎨 项目简介

还记得小时候在纸上涂涂画画的乐趣吗？现在，让我们把这份快乐搬到浏览器上！

这是一个使用现代 Web 技术栈（React + TypeScript + Canvas）构建的在线涂鸦画板，无需安装任何软件，打开浏览器就能开始创作。无论是在电脑上用鼠标，还是在平板、手机上用手指，都能流畅地绘画。

适用场景：

💼 在线会议时的即兴绘图和演示
📝 快速记录想法和灵感
👨‍🏫 教学演示和板书
🎨 儿童涂鸦和艺术创作
📊 头脑风暴和流程图绘制

✨ 核心功能

🖌️ 自由绘画

支持鼠标绘画（桌面端）
支持触摸绘画（移动端）
流畅的笔触，零延迟体验

🎨 丰富的颜色选择

提供 8 种常用颜色：

⚫ 黑色 - 经典线稿
🔴 红色 - 重点标注
🟠 橙色 - 温暖提示
🟡 黄色 - 高亮显示
🟢 绿色 - 自然清新
🔵 蓝色 - 冷静专业
🟣 紫色 - 神秘优雅
🩷 粉色 - 可爱浪漫

📏 可调节画笔

画笔大小：1-50 像素
实时预览当前大小
滑块调节，操作直观

🧹 橡皮擦工具

一键切换到橡皮擦模式，轻松修正错误

🗑️ 清空画布

一键清空，重新开始创作

📱 响应式设计

完美适配各种屏幕尺寸
移动端优化的触摸体验
高清屏幕（Retina）完美支持

🚀 快速开始

环境准备

在开始之前，请确保你的电脑上已安装：

Node.js（推荐 v16 或更高版本）
- 下载地址：https://nodejs.org/
- 验证安装：在终端运行 node -v
Git（用于克隆项目）
- 下载地址：https://git-scm.com/
- 验证安装：在终端运行 git --version

第一步：获取代码

打开终端（Windows 用户可使用 PowerShell 或 CMD），执行以下命令：

# 克隆项目到本地
git clone https://gitee.com/yang-yuqing521/graffiti-drawing-board.git

# 进入项目目录
cd graffiti-drawing-board

第二步：安装依赖

npm install

安装过程需要 1-2 分钟，请耐心等待。你会看到类似这样的输出：

added 66 packages, and audited 67 packages in 20s
found 0 vulnerabilities

第三步：启动项目

npm run dev

启动成功后，你会看到：

VITE v6.4.1  ready in 619 ms

➜  Local:   http://localhost:3000/
➜  Network: http://192.168.x.x:3000/

第四步：开始使用

在浏览器中打开 http://localhost:3000，你就能看到涂鸦画板的界面了！
在这里插入图片描述

💡 小提示：

按 Ctrl + C（Mac 用户按 Cmd + C）可以停止开发服务器
修改代码后，页面会自动刷新（热重载功能）

—效果如下：
在这里插入图片描述

🎮 使用指南

基础操作

开始绘画
- 🖱️ 桌面端：按住鼠标左键并移动
- 👆 移动端：用手指在屏幕上滑动
选择颜色
- 点击底部工具栏的彩色圆点
- 当前选中的颜色会有蓝色高亮边框
调整画笔大小
- 拖动工具栏的滑块
- 数字显示当前画笔大小（1-50px）
使用橡皮擦
- 点击橡皮擦图标
- 此时画笔变为白色，可以擦除内容
清空画布
- 点击垃圾桶图标
- 画布会立即清空

进阶技巧

精确绘画：使用较小的画笔（1-5px）绘制细节
快速涂色：使用较大的画笔（30-50px）填充大面积
混合颜色：先用一种颜色打底，再用另一种颜色叠加
移动端绘画：建议横屏使用，画布面积更大

🛠️ 技术架构

技术栈

技术	版本	作用
React	19.2.0	构建用户界面
TypeScript	5.8.2	类型安全的代码
Vite	6.2.0	快速的开发和构建
Canvas API	HTML5	高性能的 2D 绘图
Tailwind CSS	CDN	快速构建美观界面

项目结构

涂鸦画板/
├── components/              # UI 组件
│   ├── ColorPicker.tsx     # 颜色选择器
│   ├── BrushSlider.tsx     # 画笔大小滑块
│   └── Toolbar.tsx         # 工具栏容器
├── App.tsx                 # 主应用（核心逻辑）
├── constants.ts            # 常量配置
├── index.tsx               # 入口文件
├── index.html              # HTML 模板
├── package.json            # 依赖配置
├── vite.config.ts          # Vite 配置
└── README.md               # 项目说明

核心设计

1. 组件化架构

整个应用分为三个层次：

展示层（Canvas）：负责渲染绘画内容
控制层（Toolbar）：提供用户交互界面
逻辑层（App）：管理状态和协调组件

2. 状态管理

使用 React Hooks 管理应用状态：

useState：管理颜色、画笔大小、绘画状态
useRef：保存 Canvas 元素和绘图上下文的引用
useEffect：处理初始化和副作用
useCallback：优化函数性能

3. 事件处理

统一处理鼠标和触摸事件，提供一致的绘画体验：

// 鼠标事件：onMouseDown、onMouseMove、onMouseUp
// 触摸事件：onTouchStart、onTouchMove、onTouchEnd

🎯 核心技术解析

Canvas 高清适配

遇到的问题：在 Retina 屏幕上，Canvas 绘制的内容看起来模糊。

解决方案：根据设备像素比（devicePixelRatio）放大画布的实际尺寸。

// 获取设备像素比（Retina 屏幕通常是 2）
const dpr = window.devicePixelRatio || 1;

// 放大画布的实际像素
canvas.width = displayWidth * dpr;
canvas.height = displayHeight * dpr;

// 调整绘图坐标系
context.scale(dpr, dpr);

流畅的绘画体验

核心原理：使用 Canvas 的路径（Path）API 连续绘制线段。

// 开始绘画
context.beginPath();
context.moveTo(startX, startY);

// 持续绘画
context.lineTo(currentX, currentY);
context.stroke();

// 结束绘画
context.closePath();

移动端触摸支持

关键点：阻止默认的滚动行为，避免绘画时页面滚动。

// 阻止触摸时的默认滚动
onTouchStart={(e) => e.preventDefault()}
onTouchMove={(e) => e.preventDefault()}

💡 开发中的挑战与经验

挑战 1：Windows 环境下的依赖安装问题

问题：在 Git Bash 中运行 npm install 后，启动项目报错找不到 Rollup 模块。

原因：Git Bash 模拟的 Linux 环境导致 npm 安装了错误版本的原生模块。

解决方案：

方案一：使用 PowerShell 或 CMD 进行安装
方案二：在 package.json 中显式声明 Windows 版本的依赖

{
  "optionalDependencies": {
    "@rollup/rollup-win32-x64-msvc": "^4.52.5"
  }
}

经验总结：Windows 用户建议使用原生终端（PowerShell/CMD）进行 Node.js 项目开发。

挑战 2：窗口调整时画布内容丢失

问题：调整浏览器窗口大小后，已绘制的内容消失了。

原因：重新设置 Canvas 的 width 和 height 属性会清空画布内容。

解决方向：

在调整前保存画布内容为图片
调整后重新绘制图片到画布

当前状态：已识别问题，未来版本将添加此功能。

挑战 3：移动端体验优化

问题：在手机上绘画时，页面会跟着滚动。

解决方案：

监听触摸事件并调用 preventDefault()
在 CSS 中设置 touch-action: none

效果：完美支持移动端绘画，无干扰体验。

🚀 性能优化

减少不必要的重渲染

使用 useCallback 缓存函数，避免每次渲染都创建新函数：

const draw = useCallback((e) => {
  // 绘画逻辑
}, [isDrawing]);  // 仅在 isDrawing 变化时重新创建

优化 Canvas 绘制

使用圆润的笔触（lineCap: 'round'）
批量绘制路径，减少 stroke() 调用次数
合理设置画布尺寸，避免过大导致性能问题

内存管理

及时清理事件监听器
使用 useEffect 的清理函数

🎓 学到了什么？

通过这个项目，我深入学习和实践了：

Canvas API：掌握了 2D 图形绘制的核心技术
React Hooks：熟练运用 useState、useRef、useEffect、useCallback
TypeScript：体会到类型系统带来的代码质量提升
响应式设计：实现了跨设备的良好体验
性能优化：学会了如何避免不必要的重渲染
问题解决能力：解决了多个实际开发中的技术难题

🔮 未来计划

短期计划（1-2 周）

撤销/重做功能：支持 Ctrl+Z 和 Ctrl+Y
保存为图片：导出 PNG 或 JPEG 格式
更多形状工具：矩形、圆形、直线
自定义颜色：颜色拾取器

中期计划（1-2 个月）

图层系统：支持多图层编辑
文字工具：在画布上添加文字
图片导入：作为背景或贴图
滤镜效果：模糊、锐化、反色等

长期愿景（3-6 个月）

云端存储：登录账号，保存作品到云端
协作功能：实时多人绘画（WebSocket）
AI 辅助：智能补全、自动着色
社区分享：作品展示和点赞互动

📦 部署上线

构建生产版本

npm run build

构建完成后，会在 dist 目录生成优化后的静态文件。

部署到云平台

推荐平台：

Vercel（推荐）
- 访问 https://vercel.com/
- 连接 GitHub/Gitee 仓库
- 自动识别 Vite 项目并部署
Netlify
- 访问 https://www.netlify.com/
- 拖拽 dist 文件夹即可部署
GitHub Pages
- 适合开源项目
- 免费托管静态网站

🤝 贡献与反馈

如果你在使用过程中遇到问题，或者有好的想法和建议，欢迎：

🐛 提交 Issue：报告 Bug 或提出功能建议
💡 提交 Pull Request：贡献代码
⭐ Star 项目：给项目点个星星，鼓励开发者

项目仓库：https://gitee.com/yang-yuqing521/graffiti-drawing-board

📚 学习资源

如果你也想学习 Canvas 绘画应用的开发，推荐以下资源：

官方文档

开源项目

Excalidraw - 开源白板工具
tldraw - 无限画布库

🎉 总结

这个涂鸦画板项目虽小，但涵盖了现代 Web 开发的许多核心技术：

✅ 使用 React 构建组件化应用
✅ 使用 TypeScript 保证代码质量
✅ 使用 Canvas API 实现高性能绘图
✅ 实现跨平台和响应式设计
✅ 解决实际开发中的技术难题
✅ 持续优化性能和用户体验

从零开始构建一个项目，是学习新技术的最佳方式。希望这篇文章能够帮助你理解 Web 绘画应用的开发思路，也欢迎在此基础上进行更多创新和扩展！

项目信息

🔗 项目地址：Gitee - graffiti-drawing-board
🏷️ 技术标签：#React #TypeScript #Canvas #Vite #前端开发

让我们一起探索 Web 开发的无限可能！🚀