在 Canvas 上绘制完整富文本

FlexNote 的白板基于 Canvas 。

卡片、连线、图形之外，卡片内的内容同样由 Canvas 绘制，而不是为每张卡片挂载一块 HTML 。

这一选择主要出于性能。白板上往往同时存在大量卡片，再叠加平移与缩放。若每张卡片都走 DOM 排版，开销会随内容复杂度迅速放大。将内容纳入同一套 Canvas 渲染，才能把整张白板当作一个可缩放的场景来处理。

真正难的是：画布上要画的不只是一段字。

同一套渲染需要覆盖常见笔记结构：标题、加粗斜体、高亮、列表、表格、代码块、引用、mention 。还要兼容公式、图片、思维导图，以及 Mermaid / Markmap 这类图示。

卡片里可以再嵌卡片，PDF 高亮、音视频、网站剪藏也会出现在同一块画布上。它们的尺寸、对齐、层级各不相同，却要在缩放、拖拽时保持同一套视觉比例。

这些在 DOM 里大多有现成方案。Canvas 没有浏览器的排版和组件树，断行、占位、混排都要自己处理。公式和图片是异步到达的，未就绪时高度未知，到位后卡片会被撑开，周围的思维导图、连线、嵌套内容都要跟着走。多种格式挤在同一张卡片里时，任何一种算错，整张卡的高度和对齐都会偏。

另一层约束是编辑态。预览由 Canvas 绘制，进入编辑后才叠一层真正的编辑器。两者必须像素级对齐：字号、行高、断行位置、滚动位置，打开编辑时不能跳、不能重排。

Canvas 与 DOM 的盒模型、字体度量并不完全一致，差 1px 就会换行错位。列表、表格、公式、图片混在一起时，这个问题会更明显。

目前常规文档可以稳定绘制。复杂表格、较深的嵌套，以及公式、图片与正文混排时，偶发仍会有对齐或高度上的偏差。Canvas 排版没有浏览器帮你收尾，边角需要自己补。

我们也评估过「 DOM 卡片 + Canvas 连线」。卡片数量上来、缩放到较小比例后再整体拖拽时，这一方案跟不上。把文字和图示都画进 Canvas 之后，排版成本转移到自己这边，但这是把白板做成单一可缩放场景的前提。

这里有详细的性能对比 感兴趣可以看下
https://bilibili.com/video/BV1FhLX6oE4b/?spm_id_from=333.1387.homepage.video_card.click

网站： https://myflexnote.com

网站： https://myflexnote.com

macOS / Windows 均可使用。欢迎讨论。