canvas画布的特点：超出画布的内容不显示。
1. 坐标轴的转换：下面几个方法的调用都会影响后续点的坐标。
（1）translate(x, y)：该方法之后的点的坐标，全部+x +y
详情：http://www.w3school.com.cn/tags/canvas_translate.asp
注意：调用translate对之后的内容起作用。
（2）scale(x, y)：该方法之后的点的坐标，*x, *y
详情：http://www.w3school.com.cn/tags/canvas_scale.asp
（3）rotate(70*Math.PI/180);顺时针旋转，旋转中心是（0,0），所以当旋转度数大于90的时候，内容刚好完全超出画布。
注意：70*Math.PI/180这种写法，可以将度数转换为弧度。
对这个方法的理解：也是旋转坐标，但应该理解为后续图形的旋转更合适。
（4）transform和settransform
transform（a,b, c,d, e,f）：绘制一个矩形；通过 transform() 添加一个新的变换矩阵，再次绘制矩形；添加一个新的变换矩阵，然后再次绘制矩形。请注意，每当您调用 transform() 时，它都会在前一个变换矩阵上构建。详情：http://www.w3school.com.cn/tags/canvas_transform.asp
setTransform(a,b,c,d,e,f)：绘制一个矩形，通过 setTransform() 重置并创建新的变换矩阵，再次绘制矩形，重置并创建新的变换矩阵，然后再次绘制矩形。请注意，每当您调用 setTransform() 时，它都会重置前一个变换矩阵然后构建新的矩阵，因此在下面的例子中，不会显示红色矩形，因为它在蓝色矩形下面。详情：http://www.w3school.com.cn/tags/canvas_settransform.asp
（5）save()和restore()
save是入栈，restore是出栈。 在对坐标进行改变的时候，为了不让后续的坐标受到影响，用sava()方法和restore()方法将该表坐标的代码进行包裹，使后续代码不受影响。
