白板

做口播视频时，背景常常需要一块白板：讲到哪儿画到哪儿，比堆满文字的幻灯片更像在讲事情。这个工具就是为这件事做的——随手画，选好尺寸，导出一张干净的白底图，直接当录屏背景铺上。

几个刻意做出来的取舍：

• 导出是居中的。Excalidraw 自带的 getDimensions 只改画布尺寸，内容仍然钉在左上角，用来当录屏背景会歪得很明显。所以这里自己算边框，用离屏画布重新合成一次，SVG 那边则改成匹配画幅比例的 viewBox 加一层白色底。
• 画布用浅色，不跟随站点主题。导出的是白纸底图，画布如果跟着切深色，屏幕上看到的和导出的就对不上了。
• 页面铺满导航栏以下区域且不滚动。白板本身就是页面，滚动条只会让滚轮在画布边缘误滚页面。

技术上它是本站里一个不太一样的角落：站点是 SvelteKit，而 Excalidraw 是 React 组件。做法是把 React 当成一座孤岛——createRoot 挂进一个普通 DOM 节点，再把 imperative API 交回给 Svelte。整条链路只在 onMount 里动态 import()，这样 Excalidraw 永远不进预渲染的 SSR 图，页面仍然是纯静态的。

技术栈#

SvelteKit 2 · Svelte 5 Runes · React 19（孤岛） · Excalidraw 0.18 · Tailwind CSS v4