3.5 2D图形渲染基础

2D图形渲染是很多应用的基础，网页的UI、App界面、2D游戏等都是通过2D渲染技术绘制出来的。理解2D渲染的基本原理，能够帮助我们写出性能更好、效果更优的图形应用。

2D渲染管线基本流程

渲染管线（Rendering Pipeline）是指将图形数据转换为屏幕像素的整个过程，2D渲染管线相对3D来说比较简单，主要包含以下几个步骤：

Canvas是HTML5提供的2D绘图API，通过JavaScript操作像素来绘制图形：

特点：
- 立即模式渲染，调用绘制函数后立即绘制到画布上
- 适合绘制大量动态的图形，比如游戏、数据可视化
- 性能好，适合复杂的动画和大量元素的场景
- 缩放会失真，因为是位图绘制
适用场景：2D游戏、复杂动画、数据可视化图表、图像处理

SVG是基于XML的矢量图形格式，也是浏览器原生支持的2D绘图技术：

特点：
- 保留模式渲染，图形作为DOM节点存在，可以用CSS和JavaScript操作
- 矢量图形，缩放不失真
- 支持事件绑定，可以交互
- 元素太多时性能较差
适用场景：图标、插图、简单动画、需要交互的图形、需要适配不同分辨率的场景

Skia是Google开发的开源2D图形库，是Chrome浏览器、Android系统、Flutter框架的底层渲染引擎：

Cairo是开源的2D图形库，常用于GTK、GNOME等Linux桌面环境：

微软开发的Windows平台的2D渲染API，支持硬件加速，是Windows应用的主要2D渲染接口。

所有的坐标变换都可以通过矩阵乘法来实现：

将图形移动到指定位置：

x' = x + tx
y' = y + ty

绕原点旋转θ角度（顺时针为正，因为y轴向下）：

x' = x * cosθ - y * sinθ
y' = x * sinθ + y * cosθ

沿x轴和y轴缩放：

x' = x * sx
y' = y * sy

平移、旋转、缩放的组合，可以表示为3x3的矩阵：

[ a  c  tx ]
[ b  d  ty ]
[ 0  0  1  ]

变换公式：

x' = a*x + c*y + tx
y' = b*x + d*y + ty

多个变换可以通过矩阵乘法组合成一个变换矩阵，一次性应用到所有顶点，提升性能。

当多个图形重叠时，需要处理它们之间的合成关系，混合模式（Blend Mode）定义了上层像素和下层像素如何混合。

结果颜色 = 上层颜色 * 源因子 + 下层颜色 * 目标因子

正常（Normal）：默认模式，上层像素覆盖下层像素，如果上层有透明度，根据Alpha值混合：
```
结果 = 上层颜色 * 上层Alpha + 下层颜色 * (1 - 上层Alpha)
```
正片叠底（Multiply）：上下层颜色相乘，结果更暗，类似于两张透明胶片叠在一起
滤色（Screen）：上下层颜色的补色相乘再取补，结果更亮，类似于两张幻灯片叠加投影
叠加（Overlay）：结合正片叠底和滤色，亮部更亮，暗部更暗，增加对比度
相加（Add）：上下层颜色相加，结果更亮，常用于发光、火焰等效果
差值（Difference）：上下层颜色相减的绝对值，常用于反色效果