canvas
- 特点：重绘制、鼠标事件、鼠标样式需要手动兼容）
- 产品：
- figma、figjam
- 即时设计（设计文件、白板）
- mastergo
- pixso（原型、设计、白板）
- 摹客（dt
- 亿图mindmaster
- 亿图图示
DOM
- 特点
- 产品：
- Framer
- 蓝湖（定位不清晰，像是做了一个各个三方软件的文件解析器和文件收集器，不是绘图工具，可能更重在资产收集？感觉交互上很难用）
- 墨刀（all in 原型，原型有点太重，重的不像是原型）
- 摹客老项目
SVG：
- 特点
- 产品
- 摹客（rp
总结：
- pixso
- 原型没有钢笔、铅笔组件
- 设计稿有钢笔、铅笔组件，且支持编辑
- 白板有绘图笔，不支持二次编辑
- mastergo有铅笔钢笔组件
- 即时设计
- 设计文件，有钢笔、铅笔组件，且支持编辑
- 白板，有绘图笔，不支持二次编辑
- 摹客
- rp：有钢笔、铅笔组件，且支持编辑
- dt：有钢笔、铅笔组件，且支持编辑
来自AI： 不同的渲染技术（WebGL、Canvas、SVG、DOM）各有特点，适用于不同场景。以下是它们的优缺点以及适用场景：
1. WebGL（基于OpenGL的Web标准）
WebGL 是一种基于 OpenGL ES 的 3D 渲染技术，允许在浏览器中进行高性能的 2D 和 3D 图形渲染。
优点：
- 高性能：通过 GPU 加速，适合处理大量复杂图形。
- 支持 3D 渲染：可以实现 3D 图形、着色器等高级效果。
- 强大灵活：可以进行高度自定义的渲染处理。
缺点：
- 学习成本高：开发者需要掌握底层图形知识（如着色器编程）。
- 代码复杂：需要写大量代码，即便简单的图形也需手动控制。
- 不适合简单图形：对于简单的 2D 绘图来说，性能优势并不明显。
适用场景：
- 3D 图形渲染：如游戏引擎（Three.js、Babylon.js）。
- 高性能可视化：例如大型数据可视化、地图、VR/AR 应用。
- 复杂动画：需要 GPU 加速的高帧率动画场景。
2. Canvas（HTML5 Canvas 2D）
Canvas 是一种基于像素的 2D 渲染技术，可以动态绘制图形。
优点：
- 简单易用：通过 JavaScript 可以直接绘制图形。
- 支持动态更新：适合动画和实时图形处理。
- 性能较好：适合大多数 2D 动画场景。
缺点：
- 像素级渲染：无法直接编辑图形的 DOM 元素。
- 放大失真：不支持矢量图形，放大时可能出现锯齿。
- 不适合复杂交互：没有内置的事件绑定功能。
适用场景：
- 游戏开发：2D 游戏场景。
- 动态图表：需要频繁更新的图形。
- 动画渲染：如粒子效果、图像处理。
3. SVG（可缩放矢量图形）
SVG 是基于 XML 的矢量图形标准，适合绘制静态或简单的动态图形。
优点：
- 矢量图形：无论放大多少倍，图形依然清晰无损。
- DOM 结构：可以对图形进行事件绑定（如点击、拖拽）。
- 易于编辑：基于 XML 的描述方式，图形结构清晰。
- 动画支持：可以结合 CSS 和 JavaScript 实现简单动画。
缺点：
- 性能限制：当图形复杂或元素数量过多时，渲染性能下降。
- 不适合大型数据：不适合需要大量节点或动态更新的场景。
- 依赖 DOM：SVG 的节点操作受 DOM 性能限制。
适用场景：
- 矢量图标和图形：如图标库、标志、简单图表。
- 静态图表：例如简单的饼图、柱状图、组织结构图。
- 需要交互的图形：如点击区域高亮、拖拽等。
4. DOM（HTML + CSS）
DOM 主要通过 HTML 和 CSS 实现图形和动画，图形结构基于标准的 HTML 元素。
优点：
- 简单易用：开发者熟悉 HTML 和 CSS 就可以实现图形。
- 交互友好：DOM 元素天然支持事件监听。
- 易于维护：样式和结构分离，适合可复用的组件化开发。
- 兼容性好：几乎所有浏览器都支持。
缺点：
- 性能有限：适用于简单的图形和动画，复杂场景性能较差。
- 灵活性差：实现自定义图形需要大量嵌套和样式控制。
- 不适合动态图形：频繁的 DOM 更新会导致性能瓶颈。
适用场景：
- 简单 UI 动画：如按钮效果、滑动面板、简单的过渡动画。
- 静态页面元素：如页面布局、装饰图形。
- 低复杂度的交互图形：如纯 HTML 实现的简易图表。
总结对比
| 技术 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| WebGL | 高性能、支持 3D、GPU 加速 | 学习难度高，代码复杂 | 3D 游戏、复杂图形、大数据可视化 |
| Canvas | 简单易用，动态更新性能较好 | 像素级渲染，复杂交互支持较差 | 2D 动画、游戏、动态图表 |
| SVG | 矢量图形、易编辑、支持 DOM 事件 | 性能受限，不适合复杂图形和大量节点 | 图标、简单图表、交互式图形 |
| DOM | 简单易用、天然支持交互、易维护 | 性能差，灵活性差 | 页面 UI、简单动画、静态图形 |
选型建议：
- WebGL：需要极致性能、高级图形处理，特别是 3D 和大规模可视化。
- Canvas：适合 2D 动态渲染和动画，如游戏和动态图表。
- SVG：适合清晰可缩放的矢量图形，且图形需要交互。
- DOM：适合简单动画和 UI 控件，低复杂度场景。
根据具体项目需求和性能要求选择合适的技术，通常结合使用也非常常见。例如，SVG + Canvas 可以同时处理简单交互和高频更新的图形。