极客笔记HTML5 Canvas – 变换
HTML5 Canvas 是一种可以动态渲染图形的 Web 标准，通过使用 Canvas 可以实现许多有趣的效果。本篇文章将介绍如何在 Canvas 中实现变换效果。
在 HTML5 Canvas 中，我们可以使用变换（Transformation）来对绘制的图形进行操作，例如旋转，平移，缩放等。下面是一个简单的示例代码，用来在 Canvas 中绘制一个矩形。
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.fillStyle = "green";
context.fillRect(50, 50, 100, 50);
这段代码将在 Canvas 中绘制一个绿色的矩形，坐标为 (50,50)，宽度为 100，高度为 50。
旋转
旋转是变换中比较常见的一种操作。我们可以使用 rotate 函数来实现旋转效果。这个函数接收一个参数，表示旋转角度，单位为弧度。下面是一个示例代码，用来在 Canvas 中绘制一个旋转的矩形。
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.translate(100, 100);
context.rotate(Math.PI / 4);
context.fillStyle = "green";
context.fillRect(-50, -25, 100, 50);
这段代码将在 Canvas 中绘制一个旋转了 45 度的矩形，坐标为 (100,100)。需要注意的是，由于旋转操作是基于 Canvas 坐标系中心点进行的，因此我们需要先使用 translate 函数将坐标系的中心点移动到原点，再进行旋转操作。
平移
平移是将图形沿着指定方向移动一定距离的操作。我们可以使用 translate 函数来实现平移效果。这个函数接收两个参数，分别表示在横向和纵向上的平移距离。下面是一个示例代码，用来在 Canvas 中绘制一个平移的矩形。
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.translate(100, 100);
context.fillStyle = "green";
context.fillRect(-50, -25, 100, 50);
这段代码将在 Canvas 中绘制一个平移了 (100,100) 的矩形。需要注意的是，由于 Canvas 坐标系的原点是在左上角，因此我们需要将矩形的位置偏移回来，即将坐标设置为 (-50,-25)，宽度和高度分别为 100 和 50。
缩放
缩放是将图形按照指定的比例进行放大或缩小的操作。我们可以使用 scale 函数来实现缩放效果。这个函数接收两个参数，分别表示在横向和纵向上的缩放比例。下面是一个示例代码，用来在 Canvas 中绘制一个缩放的矩形。
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.translate(100, 100);
context.scale(2, 1);
context.fillStyle = "green";
context.fillRect(-50, -25, 100, 50);
这段代码将在 Canvas 中绘制一个在横向上缩放了 2 倍的矩形，坐标为 (100,100)，宽度和高度分别为 100 和 50。需要注意的是，由于缩放只会影响之后的绘制操作，因此我们需要在执行 translate 函数之后再执行 scale 函数。
切变
切变是将图形按照指定角度倾斜的操作。我们可以使用 transform 函数来实现切变效果。这个函数接收六个参数，分别表示变换矩阵的六个值。对于切变操作来说，我们只需要修改第二个和第四个参数即可。下面是一个示例代码，用来在 Canvas 中绘制一个切变的矩形。
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.translate(100, 100);
context.transform(1, 0.5, 0, 1, 0, 0);
context.fillStyle = "green";
context.fillRect(-50, -25, 100, 50);
这段代码将在 Canvas 中绘制一个向右下方倾斜了 30 度的矩形，坐标为 (100,100)，宽度和高度分别为 100 和 50。需要注意的是，由于切变只会影响之后的绘制操作，因此我们需要在执行 translate 函数之后再执行 transform 函数。
复合变换
在 HTML5 Canvas 中，我们可以将多个变换操作组合在一起，形成复合变换，从而实现更加复杂的效果。下面是一个示例代码，用来在 Canvas 中绘制一个既有旋转又有缩放的矩形。
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.translate(100, 100);
context.rotate(Math.PI / 4);
context.scale(2, 1);
context.fillStyle = "green";
context.fillRect(-50, -25, 100, 50);
这段代码将在 Canvas 中绘制一个旋转了 45 度并且在横向上缩放了 2 倍的矩形，坐标为 (100,100)，宽度和高度分别为 100 和 50。需要注意的是，由于复合变换顺序会影响最终效果，因此我们需要根据需要灵活地组合变换操作。
结论
HTML5 Canvas 中的变换操作可以帮助我们实现各种各样的图形变换效果，例如旋转，平移，缩放等。我们可以使用 rotate，translate，scale，transform 等函数来实现这些效果，并且可以将多个变换操作组合在一起形成复合变换。通过熟练掌握这些变换操作，我们可以在 Canvas 中实现非常有趣的效果。