Canvas的图形变换

在图形学中，一般先画出原形，再通过图像变换得到目的图形

Canvas提供的图形变换API：

位移：translate(x,y)

旋转：rotate(deg)

缩放：scale(se,sy)：不单只放大图形大小，也会放大其他属性

!在Canvas的图形变换函数是叠加的，

所以：

绘制前：context.save()

绘制后：context.restore()

function drawStar(cxt,x,y,R,rot){

cxt.save();

//图形变换
cxt.translate(x,y);
cxt.rotate(rot/180*Math.PI);
cxt.scale(R,R);

cxt.beginPath();
starPath(cxt);
cxt.closePath();

cxt.fillStyle="#fb3";
cxt.fill();

cxt.restore();
}

function starPath(cxt){
cxt.beginPath();
for(var i=0;i<5;i++) {

cxt.lineTo(
Math.cos((18 + i * 72) / 180 * Math.PI),
-Math.sin((18 + i * 72 )/180 * Math.PI)
);
cxt.lineTo(
Math.cos(( 54 + i * 72) /180 * Math.PI)*0.5,
-Math.sin((54 + i * 72) /180 * Math.PI)*0.5
);

}
cxt.closePath();
}

变换矩阵

|a c e|

|b d f|

|0 0 1|

a水平缩放（默认1）

b水平倾斜（默认0）

c垂直倾斜（默认0）

d垂直缩放（默认1）

e水平位移（默认0）

f垂直位移（默认0）

设置变换矩阵 ：

transform(a,b,c,d,e,f):与之前transfrom效果叠加

settransform(a,b,c,d,e,f):与之前transfrom效果无关