一、场景
| 场景 | 说明 |
|---|
| ArkUI组件 | 可直接绘制想要的元素或效果，但有局限性 |
| 自定义图形 | 有些自定义图形或效果无法用ArkUI组件满足 |
| Drawing | 实现灵活的自定义绘制效果 |
Drawing vs ArkUI组件
| 对比项 | ArkUI组件 | Drawing |
|---|
| 使用方式 | 直接使用组件 | 需自定义绘制 |
| 灵活性 | 有限 | 高 |
| 上屏显示 | 直接上屏 | 需依靠其他模块显示 |
二、绘制能力范围及实现流程
ArkGraphics 2D基于2D图像渲染引擎，提供三大核心能力：
| 能力 | 说明 |
|---|
| 画布操作 | 裁剪、旋转、缩放等 |
| 绘制效果 | 画刷（Brush）、画笔（Pen）实现填充和描边 |
| 图元绘制 | 基础图元的绘制（矩形、圆形、路径等） |
图形绘制的过程与实际作画的过程相似，主要分为4个步骤：
步骤1：创建画布（必选） ↓ 步骤2：进行画布操作（可选） ↓ 步骤3：设置绘制效果（可选） ↓ 步骤4：绘制图元（必选）
各步骤详解
| 步骤 | 名称 | 必选 | 说明 |
|---|
| 1 | 创建画布 | 必选 | 图形绘制的承载，最基本最关键的步骤 |
| 2 | 画布操作 | 可选 | 裁剪、旋转、缩放等操作 |
| 3 | 绘制效果 | 可选 | 画刷(Brush)填充内部区域，画笔(Pen)描边轮廓 |
| 4 | 绘制图元 | 必选 | 绘制基础图元（矩形、圆形、路径等） |
说明：不论多么复杂的图形，都是基础图元的不同组合。
三、显示绘制结果
基于画布完成绘制后，还需要将绘制结果上屏显示才能完整实现屏幕上可见的图形UI内容。
两种显示方式
| 方式 | 语言 | 说明 |
|---|
| RenderNode | ArkTS | 通过RenderNode获取Canvas，绘制结果由RenderNode上屏显示 |
| XComponent | C/C++ | 创建Canvas绘制，将结果拷贝到buffer，由XComponent上屏显示 |
四、与Canvas画布组件的关系
Canvas组件也具有自绘制的能力，目前有两套API：
| API | 说明 |
|---|
| CanvasRenderingContext2D | 按照W3C标准封装，可快速复用Web应用绘制逻辑 |
| OffscreenCanvasRenderingContext2D | 离屏Canvas绘制 |
| DrawingRenderingContext | 另一套绘制API |
两套API的适用场景
| API | 适用场景 |
|---|
| CanvasRenderingContext2D | Web应用和游戏、快速原型设计、数据可视化、在线绘图板、教学工具、创意应用等 |
| Native Drawing | 专业图形处理软件、桌面或移动应用等对性能要求较高的场景 |
性能对比
| 对比项 | Canvas组件 | Native Drawing Canvas |
|---|
| 绘制能力 | 本质相同 | 本质相同 |
| 性能 | 可能存在卡顿、掉帧 | 性能更优 |
| 硬件接近性 | 较低 | 更高 |
| 适用场景 | 通用场景 | 高性能、复杂绘制场景 |
说明：Canvas组件的底层也使用了Native Drawing接口来实现绘制功能，在绘制能力上两者没有本质的区别。但因为多层封装的实现过程，使得Canvas组件在硬件接近性方面不如Native Drawing Canvas。
五、其他
| 限制项 | 说明 |
|---|
| 单位 | 图形绘制过程中，使用的单位为像素（px） |
鸿蒙图形绘制通过ArkGraphics 2D提供画布操作、绘制效果、图元绘制三大能力，流程为创建画布→画布操作→设置绘制效果→绘制图元，绘制结果可通过RenderNode（ArkTS）或XComponent（C/C++）上屏显示，Canvas组件底层使用Native Drawing但多层封装可能影响性能，高性能场景推荐直接使用Native Drawing Canvas。
