画布容器

• canvas.container 使用 DOM 元素

• 共享同一个 container

• 使用用户创建的 <canvas>

• 多个画布

• 支持在容器上应用 CSS Transform

• OffscreenCanvas

画布基础能力

• 设置画布背景色

• 改变画布大小

• 按需渲染

• 坐标系转换

• 通过 API 方式完成拾取

相机投影模式

• 正交投影相机

• 透视投影相机

相机动画

• 2D 场景下的相机动画

• 3D 场景下的相机动画

相机动作

• 相机动作

• View Offset

• 以指定视点缩放

• 相机到视点的最小最大距离

圆

• 圆

• 带渐变色和模式的圆

• 带滤镜的圆

椭圆

• 椭圆

矩形

• 矩形

图片

• 图片

• 使用保持宽高比

直线

• 直线

• 标记图形

• 绘制宽度小于 1px 的线

折线

• 折线

• 标记图形

多边形

• 多边形

• 标记图形

• 填充算法

路径

• 路径样式

• 包含 L 命令

• 包含 A 命令

• 路径定义中包含多段

• 使用 Group 组合多条路径

• 标记图形

• 获取路径上的点

• 拾取区域配置

文本

• 文本

• 文本溢出

• 文本基线

• 文本公告牌效果

• 加载字体

• D3 词云

• 关闭精确度量

HTML

• HTML

• 覆盖容器上的 CSS 属性

自定义图形

• 自定义元素

• 箭头

样式系统

• 属性继承

• <color>

• <paint>

• <length>

• 自定义属性

ClipPath

• 裁剪区域

• 对裁剪区域应用动画

Gradient

• Gradient

• 带渐变的 Path

• Radial Gradient

• Inner Shadow

Pattern

• Pattern

• Rect as pattern

• Dots Pattern

• Lines Pattern

• Squares Pattern

• Pie Chart

手势

• 使用 PointerEvents 实现 Pinch 手势

• 使用 Hammer.js 手势库

• 使用 Hammer.js 手势库实现图片缩放

拖放

• 使用 Interact.js 拖拽库

• 使用 PointerEvents 实现拖拽

拾取

• 单个圆拾取

• 多个圆拾取

• 多种图形拾取

其它

• 事件委托

• 触发自定义事件

• 兼容旧版的事件委托写法

• 内置场景图事件

• 使用 MutationObserver

• TouchEvents

• pointerupoutside 事件

• 监听原生 click 事件

基本配置

• 缓动函数

• 动画生命周期控制方法

• 使用 delay 属性

• 使用 currentTime 属性

• 连续动画

• 可应用动画的属性

• 对 visibility 属性应用动画

• onframe 回调函数

常见动画效果

• 路径动画

• 蚂蚁线

• 笔迹动画

• 涟漪效果

• 常见的动画效果

• 每个元素上应用多个动画

形变动画

• 形变动画

• 转换基础图形到路径定义

• 转换基础图形到路径定义

场景图

• 层次结构

• 盒模型

• 变换

• 旋转和缩放中心

• 可见性和展示次序

• 展示次序

• 修改 Group 上的 zIndex

• 克隆节点

无障碍

• 使用浏览器搜索（command + F）文本内容

• 使用键盘导航

Canvaskit

• 使用 Skottie 播放 Lottie 动画

• 使用 CanvasKit 绘制粒子

• 绘制 emoji

• 沿路径绘制文本

• 使用 CanvasKit 绘制文本段落

拖放

• 使用拖放

• 在 Group 上使用拖放

• 拖放性能测试

手势

• 使用 Press 手势

物理引擎

• 在 2D 场景中使用 Box2D 物理引擎

• 在 2D 场景中使用 MatterJS 物理引擎

• 在 3D 场景中使用 PhysX 物理引擎

手绘风格

• 使用 rough.js 手绘风格渲染

• rough.js 参数

• 手绘风格的 D3 条形图

Yoga 排版引擎

• 使用 Yoga 排版引擎 - 容器配置

• 使用 Yoga 排版引擎 - 子元素配置

• 使用 Yoga 排版引擎 - 可用空间

• 使用 Yoga 排版引擎 - 文字排版

• 使用 Yoga 排版引擎 - 对属性应用动画

Zdog 伪 3D 效果

• 使用 Zdog 渲染

标注

• 使用标注

• 操作图片

相机控制

• 使用 Orbit Control

CSS 选择器

• CSS 选择器插件

简单算法

• 向量相加 WebGPU

• 矩阵乘法

• Reduce Sum

• Compute Shader 测试

WebGPU Graph

• WebGPU Graph PageRank

• WebGPU Graph SSSP

• WebGPU Graph BFS

图分析算法

• Breadth First Search

• Louvain Clustering Algorithm

• Bellman-Ford 最短路径算法

• Bellman-Ford 最短路径算法（1k 节点 5k 边）

• Pagerank 算法

• Pagerank 算法（1k 节点 50w 边）

• Fruchterman 布局算法

几何

• 点

• 平面

• 立方体

• 球

• 圆环

• 圆柱

• 圆锥

• 胶囊

• 自定义 Geometry

材质

• Basic

• Lambert

• Phong

• 自定义 Material

其它案例

• 3D 力导布局

• 音乐可视化

• 公告牌效果

• 开启大小衰减

• WebGPU

D3

• 替换 D3 渲染层 - 饼图

• 替换 D3 渲染层 - 柱状图

• 替换 D3 渲染层 - 折线图

• 替换 D3 渲染层 - 散点图

• D3 力导

• D3 Geo

• D3 标注

Lottie

• Lottie 播放器 - 基础图形

• Lottie 播放器 - 变换

• Lottie 播放器 - 图片资产

• 雷达

• 蚂蚁形象

• 弹簧

• 箭头

• 图标

Observable Plot

• 散点图

• 手绘风格的散点图

声明式用法

• 使用 Web Components

• 使用 Web Components 和 React

• ReactG

• ReactG 渲染到任意 G 的图形

导出图片

• 导出画布内容成图片

• 导出包含动画的 SVG

使用轻量版

• 使用轻量版

WebGL 性能

• 缩放的 Circle

• 虚线描边的 Circle

• 大量文本

• 大量矩形

• 大量圆角矩形

• 大量直线

• 大量多边形

• 大量折线

• 大量图片

• 包含一条曲线命令的 Path

• 大量箭头

• 大量 Circle Path 和 Text

• 包含 8k 节点的图

• 包含 8k 节点的图，使用曲线边

• 包含 5.5w 节点的图

• 大量直线

Canvas 性能

• g-canvas 渲染优化

• g-canvas 渲染高分辨率大图优化

• g-canvas 渲染 Circle 和 Path

• 脏矩形渲染(Canvas)

• 与 G 4.0 对比

动画性能

• Circle

• Path

• 频繁移动 Group

• 移动大量节点

• 在 WebGL 中更新 Text 的位置

• 在 WebGL 中更新 Opacity

常见问题

• 视口剔除

• 关闭 CSS 解析

教程

• 基础教程第二节：使用渲染器

• 基础教程第三节：添加交互