# 在线白板使用教程：无限画布随手画，一键导出 PNG/SVG/JSON

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/online-whiteboard-guide

## 工具简介

**在线白板**是工具派基于 Excalidraw 打造的免费在线画板工具：打开网页就能在一张无限大的画布上随手涂画，默认已选中画笔工具，线条自带自然抖动的手绘质感。画矩形、圆形、箭头，写文字、贴图片都不在话下；所有内容会自动保存到浏览器本地，刷新页面也不会丢失。画完还能一键导出 PNG 图片、SVG 矢量图或 JSON 源文件，无需注册、打开即用，做草图、流程图、思维导图和会议板书都很顺手。

## 功能亮点

- **无限画布 + 手绘风格**：画布可随意平移缩放，没有边界限制；线条是 Excalidraw 标志性的手绘风格，比死板的矢量图更有草图感。
- **完整绘图工具集**：画笔、选择、矩形、菱形、椭圆、箭头、直线、文字、插入图片、橡皮擦一应俱全，还有适合演示讲解的激光笔。
- **属性面板精细调节**：选中元素后，左侧可改描边颜色、背景填充、描边宽度、透明度，还能用图层按钮调整上下叠放顺序。
- **自动保存不丢稿**：每次改动后约 0.5 秒自动写入浏览器本地存储，也可以点「保存到本地」立即保存，刷新或重开页面内容仍在。
- **三种导出格式**：PNG 位图（插入文档）、SVG 矢量图（放大不失真）、JSON 源文件（可再次导入继续编辑），分享与归档都方便。
- **画布背景 + 深色模式**：画布背景色可用取色器任意修改，浅色 / 深色主题一键切换，夜间画图更护眼。
- **内置素材库**：点击右上角「素材库」可浏览并插入内置图标与图形素材，省去自己画的功夫。

## 参数说明

顶部操作栏各按钮的作用如下：

| 按钮 | 作用 |
| --- | --- |
| 保存到本地 | 立即把当前画布内容写入浏览器本地存储 |
| 导入 JSON | 载入之前导出的 `.json` 白板文件，恢复全部元素与画布状态 |
| 导出 JSON | 下载 `whiteboard.gjupai.json` 源文件，适合备份与换设备继续编辑 |
| 导出 PNG | 导出 `whiteboard.png` 位图，适合插入文档、PPT |
| 导出 SVG | 导出 `whiteboard.svg` 矢量图，可无限缩放不失真 |
| 画布背景 | 取色器，修改整张画布的背景色（默认浅灰 `#f8f9fa`） |
| 深色 / 浅色 | 切换界面与画布主题，深色主题背景为 `#1a1a1a` |
| 激光笔 | 切换到激光笔工具，指针划过留下渐隐轨迹，适合演示讲解 |
| 清空画布 | 二次确认后删除全部元素，并同时清除本地存档 |

## 使用步骤

1. **打开工具页面**：顶部是操作栏（保存、导入、导出等按钮），中间悬浮的是绘图工具栏，左侧是属性面板，下方大面积浅灰空白就是画布，默认已选中画笔工具，无需登录即可使用。

![在线白板主界面：顶部操作栏含保存到本地、导入/导出 JSON、导出 PNG/SVG、画布背景、深色、激光笔、清空画布按钮](article/202607/1783967863137_9809.png)

2. **直接开始作画**：按住鼠标在画布上拖动即可手绘线条，画布上会提示「点击并拖动，完成时松开」，松手即成一笔，想画什么就画什么。

3. **切换绘图工具**：点击工具栏图标可画矩形、菱形、圆形、箭头和直线；点「A」图标插入文字，点图片图标插入本地图片；画错了用橡皮擦或左下角撤销按钮回退。

4. **调节元素样式**：点选已画的元素，在左侧属性面板修改描边颜色、背景填充、描边宽度（细 / 中 / 粗）和透明度，也可用图层按钮把元素上移一层或置于顶层。

5. **个性化画布**：点「画布背景」给整张画布换底色，点「深色」切换到深色主题；左下角的缩放控件可以放大缩小画布查看细节。

6. **保存与导出成果**：绘画过程会自动保存；完成后按需点击「导出 PNG」「导出 SVG」或「导出 JSON」，文件会直接下载到本地。

## 使用技巧

- **演示讲解用激光笔**：点「激光笔」后鼠标划过的地方会留下一条渐隐的红色轨迹，不会污染画布内容，讲完自动消失，特别适合线上会议圈重点。
- **重要稿件导出 JSON 备份**：自动保存依赖浏览器本地存储，清除浏览器数据会一并丢失；重要内容建议「导出 JSON」，换电脑后「导入 JSON」即可完整恢复继续编辑。
- **背景色板一举两得**：左侧属性面板里的「背景」色板不仅会改选中元素的填充色，也会同步修改整张画布的背景色，和顶部「画布背景」取色器效果一致。
- **做流程图善用箭头与图层**：箭头工具画连线，配合属性面板的图层按钮调整前后遮挡，几步就能排出结构清晰的流程图。
- **清空前先确认**：「清空画布」会把元素和本地存档一起删除且不可恢复，点击前最好先导出一份 JSON。

## 常见问题

**Q1：画的内容刷新后会丢吗？**
不会。每次改动约 0.5 秒后自动保存到浏览器本地存储，刷新或重开页面都会自动恢复。但清除浏览器缓存 / 数据会把它一起清掉，重要内容请额外导出 JSON 备份。

**Q2：导出 PNG 和 SVG 怎么选？**
要插入 Word、PPT、聊天消息选 PNG 位图，通用性最好；要继续放大编辑、印刷或做高清素材选 SVG 矢量图，任意缩放都不失真。

**Q3：导入 JSON 有什么要求？**
需导入本工具「导出 JSON」生成（或兼容 Excalidraw 格式）的 `.json` 文件，导入后会恢复其中的全部元素和画布状态；文件格式不对会提示解析失败。

**Q4：用这个工具需要注册登录吗？**
不需要。打开页面即可绘画、保存和导出，全程在浏览器本地运行，画图内容不会上传到服务器。