代碼：
1 /**
2 * Created by Administrator on 2016/1/30.
3 */
4 function draw (id){
5 var canvas = document.getElementById(id);
6 var context = canvas.getContext('2d');
7 /* context.translate(200,120);//偏移量
8 context.rotate(Math.PI/6);//旋轉
9 context.scale(0.6,0.4);//縮放或擴大*/
10 context.transform(1,0.5,10,1,1,0);
11 context.fillStyle = "red";
12 context.fillRect(0,0,100,100);
13 // ArcFace(context);
14 }
15 /*
16 function ArcFace(context){
17 // 繪制臉型
18 context.beginPath();
19 context.lineWidth = 5;
20 context.strokeStyle = "red";
21 context.arc(0,0,90,0,Math.PI*2,true);
22 context.stroke();
23 //繪制五官
24 context.beginPath();
25 //左眼
26 context.moveTo(-30,-30);
27 context.lineTo(-30,-20);
28 //右眼
29 context.moveTo(30,-30);
30 context.lineTo(30,-20);
31 //嘴
32 context.moveTo(-20,30);
33 context.bezierCurveTo(-20,44,20,30,30,20);
34 //顏色設定
35 context.strokeStyle = "red";
36 context.lineWidth = 10;
37 context.lineCap = "round";
38 context.stroke();
39 }*/
移動方法為translate();
格式：
translate(dx,dy):
dx:水平方向上的偏移量，dy:垂直方向上的偏移量。
說明：添加偏移量后，會將偏移量附加給后續的所有坐標點。
如果需要調整圖像的位置，只需調整坐標的偏移量就可以了，不用再在新的位置重新繪圖，很直觀的實現了圖像的移動。
縮放（放大）方法為scale();
格式：
scale(sx,sy):
sx:水平方向上的縮放因子，
sy:垂直方向上的縮放因子。
說明：sx,sy為大於零的數值。當其值大於1時，為放大圖像；小於1時，為縮放圖像。
旋轉方法為rotate()；
格式：
rotate(angle);
angle為角度。
說明：angle為正值時表示順時針旋轉，負值表示逆時針旋轉。旋轉的中心點為坐標系統的原點。
另外還有方法transform(),其格式為transform(a,b,c,d,e,f);它是全能的。
