1，变换介绍

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.lineWidth = 10;
context.strokeStyle = "#cd2828";

//在三个地方绘制同样大小（30*30）的正方形
context.rect(50, 50, 30, 30);
context.rect(100, 100, 30, 30);
context.rect(150, 150, 30, 30);

context.stroke();

也可以在同一个地方调用三次rect()，但每次都移动一下坐标系：

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.lineWidth = 10;
context.strokeStyle = "#cd2828";

//在(50,50)点绘制正方形
context.rect(50, 50, 30, 30);

//把坐标系向下、向右各移动50像素
context.translate(50, 50)
context.rect(50, 50, 30, 30);

//把坐标系继续向下、向右各移动50像素（变换是可以累积的）
context.translate(50, 50)
context.rect(50, 50, 30, 30);

context.stroke();

2，旋转变换（rotate）
下面通过绘制一系列旋转的正方形，生成类似方形螺线的图案。

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.lineWidth = 4;
context.strokeStyle = "#cd2828";

//移动原点，接下来要围绕新原点旋转
context.translate(100, 100);

//绘制10个正方形
var copies = 10;
for(var i=1; i<copies; i++) {
	//绘制正方形之前，先旋转坐标系
	//旋转一周是2pi，因此每个正方形的旋转角度取决于要绘制的总数
	context.rotate(2 * Math.PI * 1/(copies-1));
	//绘制正方形
	context.rect(0, 0, 60, 60);
}

context.stroke();

4，坐标系的保存与还原
（1）调用绘图上下文的save()方法可以保存坐标系当前的状态。然后调用restore()方法可以返回保存过的前一个状态。