你可以对任何在 中绘制的图形应用转换效果。下面是可以使用的转换列表：
移动 旋转 缩放我们可以将绘制在canvas上的任何图形进行移动操作。移动意味着要重新定位绘制的图形。下面是一个示例代码：
var x = 100;
var y = 50;
context.translate(x, y);
上面的代码将canvas中已经绘制的所有元素在水平方向上移动100，在垂直方向上移动50。
注意：移动操作仅仅对那些在 translate() 函数被调用之后才绘制的图形有效果，之前绘制的图形是不会移动的。
下面是另一个例子。两个矩形被绘制于同样的坐标系，长度和宽度也相等。但是其中一个绘制在 translate() 函数之前，另一个绘制在 translate() 函数之后。来看看效果：
context.fillStyle = "#f62459";
context.fillRect(10,10, 100, 100);
context.translate(50, 25);
context.fillStyle = "#4183d7";
context.fillRect(10,10, 100, 100);
得到的结果如下图所示：
你的浏览器不支持HTML5 Canvas！你也可以将绘制在canvas上的元素进行旋转。旋转操作可以通过2D上下文的 rotate() 函数来完成。
context.rotate(radians);
旋转的角度作为参数传递到 rotate() 函数中。这个角度必须是一个弧度值，而不能是角度值。
所有的旋转图形都将绕canvas的(0,0)坐标点旋转，这是canvas的左上角位置。
和移动操作相同，所有绘制在 rotate() 函数之后的图形都会被旋转。
下面的例子绘制了两个相同的矩形，一个绘制在 rotate() 函数之前，一个绘制在 rotate() 函数之后。
context.fillStyle = "#f62459";
context.fillRect(60,20, 100, 100);
context.rotate( (Math.PI / 180) * 25); //旋转25度
context.fillStyle = "#4183d7";
context.fillRect(60,20, 100, 100);
得到的结果如下图所示：
你的浏览器不支持HTML5 Canvas！正如上面提到的，所有的图形都将绕canvas的左上角进行旋转。如果我们想要图形绕其它位置进行旋转，该怎么办呢？例如，我们需要图形绕自己的中心点进行旋转。
为了使图形绕自己的中心点进行旋转，你必须首先将canvas移动到图形的中心点，然后执行旋转操作，再将canvas移动回(0,0)位置，再绘制图形。
下面的代码演示了图形如何绕自己的中心点进行旋转。
var x = 10;
var y = 10;
var width = 100;
var height = 100
var cx = x + 0.5 * width; // 图形的X轴中心
var cy = y + 0.5 * height; // 图形的Y轴中心
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height); //绘制正常的图形
context.translate(cx, cy); //移动到图形的中心
context.rotate( (Math.PI / 180) * 25); //旋转25度
context.translate(-cx, -cy); //将中心点移动回(0,0)
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
得到的结果如下所示：
你的浏览器不支持HTML5 Canvas！这个例子首先将canvas的旋转点移动到矩形的中心(cx, cy)，然后旋转canvas 25度，再接着将canvas的旋转点移动回(0,0)位置。现在，canvas绕(cx,cy)旋转了25度。这时所有绘制的东西都将绕(cx,cy)旋转25度。因此，接下来绘制的矩形也会绕(cx,cy)旋转25度。
注意，矩形的坐标系统并没有改变，你可以看到红色和蓝色的矩形的 fillRect 方法使用的是相同的参数。这里仅仅是转换操作使两个矩形位于不同的位置和旋转角度。
我们还可以实现将绘制在HTML5 canavs中的图形自动进行缩放。
在进行缩放的时候，x轴和y轴的坐标系统会按一定比例进行缩放。这个缩放比例可以通过 scale() 函数来设置。例如：
var scaleX = 2;
var scaleY = 2;
context.scale(scaleX, scaleY);
这个例子将X轴和Y轴的坐标系统都放大2倍。
和 translate() 和 rotate() 函数相同，所有在 scale() 函数被调用之后绘制的图形才会被缩放。来看下面的例子：
var x = 10;
var y = 10;
var width = 100;
var height = 100
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
context.scale(2,2);
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
上面的代码得到的结果如下：
你的浏览器不支持HTML5 Canvas！现在，蓝色的矩形被放大了2倍。注意观察，蓝色的矩形距离canvas左上角(0,0)位置的距离也被放大了2倍。这是因为蓝色矩形的所有坐标系都被放大了2倍。如果你不想在缩放图形的时候使它移动，你要在缩放的同时还要对它进行移动操作。
在下面的例子中，在canvas中有4个矩形。我们可以通过滑块来控制矩形的缩放。
你的浏览器不支持HTML5 Canvas！缩放级别:
如果在你的浏览器中，你看到的是一个输入框，你可以输入1-10，然后使用tab将跳出输入框，来对图形进行缩放。如果你看到的是一个滑块，可以使用鼠标来控制图形的缩放。
查看更多关于HTML5 Canvas：图形转换的详细内容...