canvas之图形的变化（保存，平移，缩放，旋转）

1、保存与恢复canvas状态ctx.save();暂时将当前的状态保存到堆中ctx.restore();该方法用于将上一个保存的状态从堆中再次取出，恢复该状态的所有设置。<meta charset="utf-8"><title></title><style type="text css"="">*{padding: 0;margin:0;}body{background: #1b1b1b;}#div1{margin:50px auto; width:300px; height: 300px;}canvas{background: #fff;}<script type="text javascript"="">window.onload = function(){var c = document.getElementById('myCanvas');var context = c.getContext('2d');//开始绘制矩形context.fillStyle = '#f0f';context.strokeStyle = 'blue';context.fillRect(20,20,100,100);context.strokeRect(20,20,100,100);context.fill();context.stroke();//保存当前canvas状态context.save();//绘制另外一个矩形context.fillStyle = '#f00';context.strokeStyle = 'green';context.fillRect(140,20,100,100);context.strokeRect(140,20,100,100);context.fill();context.stroke();//恢复第一个矩形的状态context.restore();//绘制两个矩形context.fillRect(20,140,50,50);context.strokeRect(80,140,50,50);};<div id="div1"><canvas id="mycanvas" width="300" height="200"></canvas id="mycanvas" width="300" height="200"></div id="div1"></script type="text></style type="text></meta charset="utf-8">效果展示：2、移动坐标空间context.translate(dx,dy); dx,dy分别表示坐标原点沿水平和垂直两个方向的偏移量。（在图形变换之前，最好使用save()方法保存当前状态的好习惯。使用restore()方法恢复原来的状态）。<meta charset="utf-8"><title></title><style type="text css"="">*{padding: 0;margin:0;}body{background: #1b1b1b;}#div1{margin:50px auto; width:300px; height: 300px;}canvas{background: #fff;}<script type="text javascript"="">window.onload = function(){draw();};function drawTop(ctx,fillStyle){ctx.fillStyle = fillStyle;ctx.beginPath();ctx.arc(0,0,30,0,Math.PI,true);ctx.closePath();ctx.fill();}function drawGrip(ctx){ctx.save();ctx.fillStyle = 'blue';ctx.fillRect(-1.5,0,1.5,40);ctx.beginPath();ctx.arc(-5,40,4,Math.PI,Math.PI*2,true);ctx.stroke();ctx.closePath();ctx.restore();}function draw(){var ctx = document.getElementById('myCanvas').getContext('2d');ctx.translate(80,80);for(var i=0; i<10; i++){ctx.save();ctx.translate(60*i,0);drawTop(ctx,'rgb('+(30*i)+','+(255-30*i)+',255)');drawGrip(ctx);ctx.restore();}}<div id="div1"><canvas id="mycanvas" width="700" height="300"></canvas id="mycanvas" width="700" height="300"></div id="div1"></script type="text></style type="text></meta charset="utf-8">

<img src="http://images.cnitblog.com/blog/553761/201501/061023225936856.png" alt="" style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);" />

3、旋转坐标空间context.rotate(angle); 该方法只有一个参数 旋转角度angle，旋转角度以顺时针方向为正方向，以弧度为单位，旋转中心为canvas的原点。<meta charset="utf-8"><title></title><style type="text css"="">*{padding: 0;margin:0;}body{background: #1b1b1b;}#div1{margin:50px auto; width:300px; height: 300px;}canvas{background: #fff;}<script type="text javascript"="">window.onload = function(){draw();};function drawTop(ctx,fillStyle){ctx.fillStyle = fillStyle;ctx.beginPath();ctx.arc(0,0,30,0,Math.PI,true);ctx.closePath();ctx.fill();}function drawGrip(ctx){ctx.save();ctx.fillStyle = 'blue';ctx.fillRect(-1.5,0,1.5,40);ctx.beginPath();ctx.strokeStyle = 'blue';ctx.arc(-5,40,4,Math.PI,Math.PI*2,true);ctx.stroke();ctx.closePath();ctx.restore();}function draw(){var c = document.getElementById('myCanvas');var ctx = c.getContext('2d');ctx.translate(150,150);for(var i=0; i<8; i++){ctx.save();ctx.rotate(Math.PI*(2/4+i/4));ctx.translate(0,-100);drawTop(ctx,'rgb('+(30*i)+','+(255-30*i)+',255)');drawGrip(ctx);ctx.restore();}}<div id="div1"><canvas id="mycanvas" width="300" height="300"></canvas id="mycanvas" width="300" height="300"></div id="div1"></script type="text></style type="text></meta charset="utf-8">

效果展示：<img src="http://images.cnitblog.com/blog/553761/201501/061157253753588.png" alt="" style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);" />

4、缩放图形ctx.scale(x,y); 其中x为x轴的缩放，y为y轴的缩放，如果要缩小，值为小于1的数值，如果要放大，值为大于1的数值。<meta charset="utf-8"><title></title><style type="text css"="">*{padding: 0;margin:0;}body{background: #1b1b1b;}#div1{margin:50px auto; width:300px; height: 300px;}canvas{background: #fff;}<script type="text javascript"="">window.onload = function(){draw();};function draw(){var c = document.getElementById('myCanvas');var ctx = c.getContext('2d');ctx.translate(180,20);for(var i=0; i<80; i++){ctx.save();ctx.translate(30,30);ctx.scale(0.95,0.95);ctx.rotate(Math.PI/12);ctx.beginPath();ctx.fillStyle = 'red';ctx.globalAlpha = '0.4';ctx.arc(0,0,50,0,Math.PI*2,true);ctx.closePath();ctx.fill();}}<div id="div1"><canvas id="mycanvas" width="300" height="300"></canvas id="mycanvas" width="300" height="300"></div id="div1"></script type="text></style type="text></meta charset="utf-8">效果展示：5、矩阵变换transform方法用于直接对变形矩阵作修改，即进行矩阵变形。context.transform(m11,m12,m21,m22,dx,dy);   该方法必须将当前的变换矩阵与下面的矩阵进行乘法运算。即：

m11（默认为1）	m21（默认为0）	dx
m12（默认为0）	m22（默认为1）	dy
0	0	1

   也就是说假设A（x,y）要变换成B(x’,y’)可以通过乘以上述矩阵即可得到。 一：平移（translate）， translate可以用下面的方法替代如上图所示：x’=x+dxy’=y+dy即：其中dx为原点沿着x轴移动的数值，y为原点沿着y轴移动的数值。context.translate(x,y)可以用下面的transform方法来替代：context.transform(0,1,1,0,dx,dy); 或 context.transform(1,0,0,1,dx,dy); 二、缩放:  scale(x,y) x’=m11*xy’=m22*y或x'=m12*xy'=m21*y (其中，m11、m22 和m12、m21分别表示在x轴和y轴上的缩放倍数)则：scale(x,y); 可以通过下面的transform发放来替代：context.transform(m11,0,0,m22,0,0);  或 context.transform(0,m12,m21,0,0,0); 三、旋转： rotate(angle);可以用下面的transform方法来替代：context.transform(cosΘ,sinΘ,-sinΘ,cosΘ,0,0);其中Θ为旋转的角度，dx,dy都为0表示坐标原点不变。如图：x' = x*cosΘ - y*sinΘ        y' = x*sinΘ + y*cosΘ也即是 则：context.transform(Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180),-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),0,0）可以替代context.rotate(θ)。也可以使用context.transform(-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180), 0,0）替代。eg: context.transfob0ebrm(0.95,0,0,0.95,30,30); 可以替代 context.translate(30,30); context.scale(0.95.0.95);setTransform方法用于将当前的变化矩阵 重置 为最初的矩阵，然后以相同的参数调用transform方法，即先set（重置），再transform（变换）用法： context.setTransform(m11,m12,m21,m22,dx,dy);

<meta charset="utf-8"><title></title><style type="text css"="">*{padding: 0;margin:0;}body{background: #1b1b1b;}#div1{margin:50px auto; width:300px; height: 300px;}canvas{background: #fff;}<script type="text javascript"="">window.onload = function(){draw();};function draw(){var c = document.getElementById('myCanvas');var ctx = c.getContext('2d');ctx.translate(200,20);for(var i=0; i<80; i++){ctx.save();ctx.transform(0.95,0,0,0.95,30,30);ctx.rotate(Math.PI/12);ctx.beginPath();ctx.fillStyle = 'red';ctx.globalAlpha = '0.4';ctx.arc(0,0,50,0,Math.PI*2,true);ctx.closePath();ctx.fill();}ctx.setTransform(1,0,0,1,10,10);    //将前面的矩阵恢复为最初的矩阵，即恢复最初的原点，然后将坐标原点改为(10,10),并以新的坐标绘制一个蓝色的矩形ctx.fillStyle = 'blue';ctx.fillRect(0,0,50,50);ctx.fill();}<div id="div1"><canvas id="mycanvas" width="700" height="300"></canvas id="mycanvas" width="700" height="300"></div id="div1"></script type="text></style type="text></meta charset="utf-8">

 效果显示：