Paint 所有变形

什么是“Paint 变形”？

在计算机图形学中，“Paint 变形”通常指对图形对象进行几何变换的操作。这些操作包括平移（移动）、旋转、缩放和倾斜（错切），是构建动态视觉效果和复杂图形的基础。

1. 平移（Translation）

将图形沿 X 轴或 Y 轴方向移动指定距离，不改变其形状或方向。

示例（Canvas）：

ctx.translate(50, 30); // 向右50px，向下30px

2. 旋转（Rotation）

围绕某一点（通常是原点或图形中心）将图形旋转一定角度（单位：弧度）。

示例：

ctx.rotate(Math.PI / 4); // 顺时针旋转45度

3. 缩放（Scaling）

按比例放大或缩小图形的尺寸。可分别设置 X 轴和 Y 轴的缩放因子。

示例：

ctx.scale(1.5, 0.8); // X轴放大1.5倍，Y轴缩小至80%

4. 倾斜（Skew / Shear）

使图形沿 X 轴或 Y 轴发生倾斜变形，常用于模拟透视或特殊视觉效果。

注意：HTML5 Canvas 原生不支持 skew，但可通过 transform() 实现：

ctx.transform(1, Math.tan(0.5), 0, 1, 0, 0); // X轴倾斜

在 CSS 中可直接使用 skewX() 或 skewY()。

5. 组合变换

实际应用中，常将多种变形组合使用。顺序会影响最终结果（变换顺序不可交换）。

建议使用 save() 和 restore() 管理变换状态。

应用场景

• 动画制作（如旋转图标、弹跳效果）
• 数据可视化（坐标系调整）
• 游戏开发（角色移动与转向）
• UI 设计（按钮悬停缩放、卡片翻转）