打造一個現代化的 Web 塗鴉畫板 ✨

一個輕量級、高性能的在線繪畫應用，支持桌面和移動端，讓創意隨時隨地釋放！

塗鴉板實現思路和步驟_weixin_git

🎨 項目簡介

還記得小時候在紙上塗塗畫畫的樂趣嗎？現在，讓我們把這份快樂搬到瀏覽器上！

這是一個使用現代 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，你就能看到塗鴉畫板的界面了！

塗鴉板實現思路和步驟_weixin_Web_02

💡 小提示：

  • 按 Ctrl + C（Mac 用户按 Cmd + C）可以停止開發服務器
  • 修改代碼後，頁面會自動刷新（熱重載功能）

—效果如下：

塗鴉板實現思路和步驟_weixin_移動端_03

🎮 使用指南

基礎操作

  1. 開始繪畫
  • 🖱️ 桌面端：按住鼠標左鍵並移動
  • 👆 移動端：用手指在屏幕上滑動
  1. 選擇顏色
  • 點擊底部工具欄的彩色圓點
  • 當前選中的顏色會有藍色高亮邊框
  1. 調整畫筆大小
  • 拖動工具欄的滑塊
  • 數字顯示當前畫筆大小（1-50px）
  1. 使用橡皮擦
  • 點擊橡皮擦圖標
  • 此時畫筆變為白色，可以擦除內容
  1. 清空畫布
  • 點擊垃圾桶圖標
  • 畫布會立即清空

進階技巧

  • 精確繪畫：使用較小的畫筆（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 的清理函數

🎓 學到了什麼？

通過這個項目，我深入學習和實踐了：

  1. Canvas API：掌握了 2D 圖形繪製的核心技術
  2. React Hooks：熟練運用 useState、useRef、useEffect、useCallback
  3. TypeScript：體會到類型系統帶來的代碼質量提升
  4. 響應式設計：實現了跨設備的良好體驗
  5. 性能優化：學會了如何避免不必要的重渲染
  6. 問題解決能力：解決了多個實際開發中的技術難題

🔮 未來計劃

短期計劃（1-2 周）

  • 撤銷/重做功能：支持 Ctrl+Z 和 Ctrl+Y
  • 保存為圖片：導出 PNG 或 JPEG 格式
  • 更多形狀工具：矩形、圓形、直線
  • 自定義顏色：顏色拾取器

中期計劃（1-2 個月）

  • 圖層系統：支持多圖層編輯
  • 文字工具：在畫布上添加文字
  • 圖片導入：作為背景或貼圖
  • 濾鏡效果：模糊、鋭化、反色等

長期願景（3-6 個月）

  • 雲端存儲：登錄賬號，保存作品到雲端
  • 協作功能：實時多人繪畫（WebSocket）
  • AI 輔助：智能補全、自動着色
  • 社區分享：作品展示和點贊互動

📦 部署上線

構建生產版本

npm run build

構建完成後，會在 dist 目錄生成優化後的靜態文件。

部署到雲平台

🤝 貢獻與反饋

如果你在使用過程中遇到問題，或者有好的想法和建議，歡迎：

  • 🐛 提交 Issue：報告 Bug 或提出功能建議
  • 💡 提交 Pull Request：貢獻代碼
  • ⭐ Star 項目：給項目點個星星，鼓勵開發者


🎉 總結

這個塗鴉畫板項目雖小，但涵蓋了現代 Web 開發的許多核心技術：

  • ✅ 使用 React 構建組件化應用
  • ✅ 使用 TypeScript 保證代碼質量
  • ✅ 使用 Canvas API 實現高性能繪圖
  • ✅ 實現跨平台和響應式設計
  • ✅ 解決實際開發中的技術難題
  • ✅ 持續優化性能和用户體驗

從零開始構建一個項目，是學習新技術的最佳方式。希望這篇文章能夠幫助你理解 Web 繪畫應用的開發思路，也歡迎在此基礎上進行更多創新和擴展！