Merge branch 'master' of github.com:wangdoc/webapi-tutorial

Author: ruanyf

docs/canvas.md

@@ -615,6 +615,10 @@ ctx.canvas === canvas // true
 - `CanvasRenderingContext2D.rotate()`：图像旋转
 - `CanvasRenderingContext2D.scale()`：图像缩放
 - `CanvasRenderingContext2D.translate()`：图像平移
+- `CanvasRenderingContext2D.transform()`：通过一个变换矩阵完成图像变换
+- `CanvasRenderingContext2D.setTransform()`：取消前面的图像变换
+
+**（1）rotate()**
 
 `CanvasRenderingContext2D.rotate()`方法用于图像旋转。它接受一个弧度值作为参数，表示顺时针旋转的度数。
 
@@ -630,6 +634,8 @@ ctx.fillRect(70, 0, 100, 30);
 
 旋转中心点始终是画布左上角的原点。如果要更改中心点，需要使用`translate()`方法移动画布。
 
+**（2）scale()**
+
 `CanvasRenderingContext2D.scale()`方法用于缩放图像。它接受两个参数，分别是`x`轴方向的缩放因子和`y`轴方向的缩放因子。默认情况下，一个单位就是一个像素，缩放因子可以缩放单位，比如缩放因子`0.5`表示将大小缩小为原来的50%，缩放因子`10`表示放大十倍。
 
 ```javascript
@@ -655,34 +661,74 @@ ctx.fillText('Hello world!', 20, -20);
 
 上面代码会显示一个水平倒转的、高度放大2倍的`Hello World!`。
 
+注意，负向缩放本质是坐标翻转，所针对的坐标轴就是画布左上角原点的坐标轴。
+
+**（3）translate()**
+
+`CanvasRenderingContext2D.translate()`方法用于平移图像。它接受两个参数，分别是 x 轴和 y 轴移动的距离（单位像素）。
 
 ```javascript
-ctx.translate( x, y )//位移：把图像原点位移到(x， y)的位置
-ctx.rotate( deg )//旋转：旋转 deg 度数
-ctx.scale( sx, sy )//缩放：在横向进行 sx 倍的缩放，在纵向进行 sy 倍的缩放
+var canvas = document.getElementById('myCanvas');
+var ctx = canvas.getContext('2d');
+
+ctx.translate(50, 50);
+ctx.fillRect(0, 0, 100, 100);
 ```
 
-缩放出现的问题
-1.如果有`lineWith`，宽度也会缩放
-2.如果起始点不是`(0, 0)`，起始点也会缩放
+**（4）transform()**
+
+`CanvasRenderingContext2D.transform()`方法接受一个变换矩阵的六个元素作为参数，完成缩放、旋转、移动和倾斜等变形。
 
-### 变换矩阵
+它的使用格式如下。
 
 ```javascript
 ctx.transform(a, b, c, d, e, f);
 /*
-a:水平缩放(默认值1)
-b:水平倾斜(默认值0)
-c:垂直倾斜(默认值0)
-d:垂直缩放(默认值1)
-e:水平位移(默认值0)
-f:垂直位移(默认值0)
+a:水平缩放(默认值1，单位倍数)
+b:水平倾斜(默认值0，单位弧度)
+c:垂直倾斜(默认值0，单位弧度)
+d:垂直缩放(默认值1，单位倍数)
+e:水平位移(默认值0，单位像素)
+f:垂直位移(默认值0，单位像素)
 */
 ```
 
-`context.transform()`可以叠加使用，如果需要重新初始化矩阵变换的值，可以用`context.setTransform(a, b, c, d, e, f)`。它会使得之前设置的`context.transform()`失效，恢复为单位矩阵然后再`transform`。
+下面是一个例子。
+
+```javascript
+var canvas = document.getElementById('myCanvas');
+var ctx = canvas.getContext('2d');
+
+ctx.transform(2, 0, 0, 1, 50, 50);
+ctx.fillRect(0, 0, 100, 100);
+```
+
+上面代码中，原始图形是 100 x 100 的矩形，结果缩放成 200 x 100 的矩形，并且左上角从`(0, 0)`移动到`(50, 50)`。
+
+注意，多个`transform()`方法具有叠加效果。
+
+**（5）setTransform()**
+
+`CanvasRenderingContext2D.setTransform()`方法取消前面的图形变换，将画布恢复到该方法指定的状态。该方法的参数与`transform()`方法完全一致。
+
+```javascript
+var canvas = document.getElementById('myCanvas');
+var ctx = canvas.getContext('2d');
+
+ctx.translate(50, 50);
+ctx.fillRect(0, 0, 100, 100);
+
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+ctx.fillRect(0, 0, 100, 100);
+```
+
+上面代码中，第一个`fillRect()`方法绘制的矩形，左上角从`(0, 0)`平移到`(50, 50)`。`setTransform()`方法取消了这个变换（已绘制的图形不受影响），将画布恢复到默认状态（变换矩形`1, 0, 0, 1, 0, 0`），所以第二个矩形的左上角回到`(0, 0)`。
+
+## `<canvas>` 元素的方法
+
+除了`CanvasRenderingContext2D`对象提供的方法，`<canvas>`元素本身也有自己的方法。
 
-## HTMLCanvasElement.toDataURL()，HTMLCanvasElement.toBlob()
+### HTMLCanvasElement.toDataURL()，HTMLCanvasElement.toBlob()
 
 `<canvas>`元素的`toDataURL()`方法，可以将 Canvas 数据转为 Data URI 格式的图像。