学习目的：使用变形：移动，旋转，缩放栅格，创造出更强大的图形。
状态的保存与恢复Saving and restoring state
canvas的状态就是当前画面应用的所有样式和变形的一个快照，canvas的状态被存储在栈中，每当save方法被调用后，当前状态就会被推送到栈中保存。
状态信息包括：当前应用的变形； strokeStyle; fillStyle; globalAlpha; lineWidth; lineCap; lineJoin; miterLimit; shadowOffsetX; shadowOffsetY; shadowBlur; shadowColor; globalCompositeOperation; clipping path
save() 保存状态
restore() 恢复状态
每调用一次restore()方法后，上一个保存的状态就会从栈中弹出，所有设定都会被恢复。
var cvs = document.getElementById("canvas");
if(cvs.getContext){
var ctx = cvs.getContext("2d");
ctx.fillRect(0,0,150,150);
ctx.save();
ctx.fillStyle = "#09f";
ctx.fillRect(15,15,120,120);
ctx.save();
ctx.fillStyle = "#fff";
ctx.globalAlpha = 0.5;
ctx.fillRect(30,30,90,90);
ctx.restore();
ctx.fillRect(45,45,60,60);
ctx.restore();
ctx.fillRect(60,60,30,30);
}
变形一： 移动Translating
translate(x, y) 移动canvas和它的原点
var cvs = document.getElementById("canvas");
if(cvs.getContext){
var ctx = cvs.getContext("2d");
ctx.fillRect(0,0,300,300);
for(var i=0; i<3; i++){
for(var j=0; j<3; j++){
ctx.save();
ctx.strokeStyle = "#9cff00";
ctx.translate(500+100*j, 50+100*i);
drawSpirograph(ctx, 20*(j+2)/(j+1), -8*(i+3)/(i+1), 10);
ctx.restore();
}
}
}
function drawSpirograph(ctx, R, r, m){
var x1 = R-m;
var y1 = 0;
var i = 1;
ctx.beginPath();
ctx.moveTo(x1, y1);
do{
if(i>20000) break;
var x2 = (R+r)*Math.cos(Math.PI/72*i)-(r+m)*Math.cos((R+r)/r*(Math.PI/72*i));
var y2 = (R+r)*Math.sin(Math.PI/72*i)-(r+m)*Math.sin((R+r)/r*(Math.PI/72*i));
ctx.lineTo(x2, y2);
x1 = x2;
y1 = y2;
i++;
}while( x2 != R-m && y2 != 0 );
ctx.stroke();
}
变形二： 旋转Rotating
以原点为中心旋转canvas, 旋转中心点始终是canvas的原点，通过translate方法可以改变原点位置。
rotate(angle) 参数angle是旋转的角度，顺时针方向以弧度为单位值进行旋转
var cvs = document.getElementById("canvas");
if(cvs.getContext){
var ctx = cvs.getContext("2d");
ctx.translate(75,75); //移动canvas的坐标原点到图案的正中心点
for(var i=1; i<6; i++){
ctx.save(); //每一圈都有自己的canvas状态
ctx.fillStyle = 'rgb(' + (51*i) +',' + (255-51*i) + ', 255)'; //每一圈的图案颜色是一致的
var m = i*6;
for(var j=0; j<m; j++){
ctx.rotate(Math.PI*2/m);
ctx.beginPath();
ctx.arc(0, 12.5*i, 5, 0, Math.PI*2, true);
ctx.fill();
}
}
}
变形三：缩放Scaling
scale(x, y)
x轴和y轴的缩放因子必须是正直， 大于1.0表示放大， 小于1.0表示缩小
本质
上述三种变形的原理都是使用矩阵来实现的
transform(m11, m12, m13, m22, dx, dy)