🎨 Bored Canvas

Bored Canvas 是一个基于 React 和 HTML5 Canvas 构建的轻量级、高性能 Web 绘图应用。它专注于提供拟真的笔触体验（如铅笔、蜡笔、水彩等）和极简的现代化 UI 设计。

✨ 主要功能 (Features)

1. 拟真笔刷系统 (Realistic Brushes)

项目内置了多种基于数学算法模拟的艺术笔刷:

• 🖌️ 经典笔 (Normal): 标准的 HTML5 线条。
• ✏️ 绘图铅笔 (Pencil): 通过随机散布颗粒模拟碳粉散落效果，并在两点间插值保证线条连续性。
• 🖍️ 艺术蜡笔 (Crayon): 多层渲染（核心深、边缘浅），模拟粗糙纹理和蜡质高光。
• 🖊️ 商务圆珠 (Ballpoint): 使用 multiply 混合模式模拟油性墨水，根据书写速度调整透明度，并在起笔/停笔时产生墨团效果。
• 🎨 灵感水彩 (Watercolor): 极高透明度与边缘羽化，模拟湿画法的晕染与色彩叠加。

2. 交互体验优化

• 无延迟绘图: 采用 RequestAnimationFrame 或高效的事件监听机制，确保笔触跟手。
• 智能橡皮擦: 切换橡皮擦时，光标自动变为可视化的圆形跟随指示器，且擦除范围自动放大 4 倍以提高效率。
• 防误触与校准: 自动计算 Canvas getBoundingClientRect，修复因 CSS 布局或高分屏导致的坐标偏移问题。
• 本地持久化: 画布内容自动保存至 localStorage，刷新页面不丢失作品。

3. 现代化 UI 设计

• 玻璃态工具栏 (Glassmorphism): 采用背景模糊 (backdrop-filter) 和半透明白底，营造悬浮感。
• 可拖拽交互: 工具栏支持在屏幕任意位置拖拽悬停，避免遮挡画作。
• 响应式画布: 画布自动适应窗口大小 (window.innerWidth/Height)。

4. 实用工具

• 撤销 (Undo): 基于快照栈的历史记录回溯功能。
• 导出图片: 支持将作品一键导出为 .jpg 格式（自动填充白色背景）。
• 清空画布: 一键重置并在本地存储中清除记录。

---

🛠️ 技术栈 (Tech Stack)

• Core: React (Hooks: useRef, useEffect, useState)
• Language: TypeScript
• Graphics: HTML5 Canvas API (CanvasRenderingContext2D)
• Build Tool: Vite (推荐)

---

📂 项目结构 (Project Structure)

src/
├── components/
│   ├── App.tsx       # UI 布局、工具栏逻辑、全局状态管理
│   └── Canvas.tsx    # 画布核心组件、绘图事件监听、光标渲染
└── utils/
    └── brushes.ts    # 核心笔刷算法库（铅笔、蜡笔、水彩等的实现逻辑）

---

🚀 快速开始 (Getting Started)

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

部署到 GitHub Pages

如果你遇到了权限验证界面，请确保点击 "Authorize git-ecosystem" 完成授权。

推荐的部署命令（手动部署模式）：

# 1. 构建项目
npm run build

# 2. 进入构建目录
cd dist

# 3. 初始化 git 并提交
git init
git add -A
git commit -m "deploy"

# 4. 推送到 gh-pages 分支
git push -f <你的仓库地址> master:gh-pages

---

🧩 笔刷算法解析

为了实现逼真的效果，本项目没有使用简单的 lineTo，而是采用了基于点的粒子渲染系统：

笔刷类型	核心算法逻辑
铅笔	在路径插值点周围进行随机的高斯分布采样，模拟石墨颗粒。
蜡笔	叠加 4 层不同半径和透明度的圆，并添加噪点模拟纸张纹理。
圆珠笔	依据 velocity (鼠标速度) 动态调整透明度（模拟供墨），使用 multiply 混合模式。
水彩	在插值点绘制多层低透明度的变形椭圆，利用 Canvas 的透明度叠加特性产生水痕。

---

📝 待办事项 (To-Do)

• 添加图层支持 (Layer Support)
• 增加更多形状工具 (矩形、圆形)
• 移动端触摸适配

---

Enjoy Drawing! 🎨