状态的保存和恢复 saving and restoring state
在了解变形之前，我先介绍一下两个在你开始绘制复杂图形就必不可少的方法。
save() restore()
和restore方法是用来保存和恢复 canvas 状态的，都没有参数。canvas 的状态就是当前画面应用的所有样式和变形的一个快照。canvas 状态是以堆(stack)的方式保存的，每一次调用save方法，当前的状态就会被推入堆中保存起来。你可以调用任意多次save方法。每一次调用restore方法，上一个保存的状态就从堆中弹出，所有设定都恢复。
save和 restore的应用例子
我们尝试用这个连续矩形的例子来描述 canvas 的状态堆是如何工作的。
第一步是用默认设置画一个大四方形，然后保存一下状态。改变填充颜色画第二个小一点的蓝色四方形，然后再保存一下状态。再次改变填充颜色绘制更小一点的半透明的白色四方形。到目前为止所做的动作和前面章节的都很类似。不过一旦我们调用restore，状态堆中最后的状态会弹出，并恢复所有设置。如果不是之前用save保存了状态，那么我们就需要手动改变设回到前一个状态，这个对于两三个属性的时候还是适用的，一旦多了，我们的代码将会猛涨。当第二次调用restore时，已经恢复到最初的状态，因此最后是再一次绘制出一个黑色的四方形。
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.fillrect(0,0,150,150); // draw a rectangle with default settings ctx.save(); // save the default state ctx.fillstyle = '#09f' // make changes to the settings ctx.fillrect(15,15,120,120); // draw a rectangle with new settings ctx.save(); // save the current state ctx.fillstyle = '#fff' // make changes to the settings ctx.globalalpha = 0.5; ctx.fillrect(30,30,90,90); // draw a rectangle with new settings ctx.restore(); // restore previous state ctx.fillrect(45,45,60,60); // draw a rectangle with restored settings ctx.restore(); // restore original state ctx.fillrect(60,60,30,30); // draw a rectangle with restored settings }
移动 translating
我们先介绍translate方法，它用来移动 canvas 和它的原点到一个不同的位置。
translate(x, y) translate
方法接受两个参数。x 是左右偏移量，y 是上下偏移量，如下图所示。
在做变形之前先保存状态是一个良好的习惯。大多数情况下，调用 restore方法比手动恢复原先的状态要简单得多。又，如果你是在一个循环中做位移但没有保存和恢复 canvas 的状态，很可能到最后会发现怎么有些东西不见了，那是因为它很可能已经超出 canvas 范围以外了。
translate
的例子
这个例子显示了一些移动 canvas 原点的好处。我创建了一个drawspirograph方法用来绘制螺旋（spirograph）图案，那是围绕原点绘制出来的。如果不使用translate方法，那么只能看见其中的四分之一。translate同时让我可以任意放置这些图案，而不需要在 spirograph 方法中手工调整坐标值，既好理解也方便使用。我在draw方法中调用drawspirograph方法 9 次，用了 2 层循环。每一次循环，先移动 canvas ，画螺旋图案，然后恢复早原始状态。
function draw() { var ctx = document.getelementbyid('canvas').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(50+j*100,50+i*100); drawspirograph(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10); ctx.restore(); } } } function drawspirograph(ctx,r,r,o){ var x1 = r-o; var y1 = 0; var i = 1; ctx.beginpath(); ctx.moveto(x1,y1); do { if (i>20000) break; var x2 = (r+r)*math.cos(i*math.pi/72) - (r+o)*math.cos(((r+r)/r)*(i*math.pi/72)) var y2 = (r+r)*math.sin(i*math.pi/72) - (r+o)*math.sin(((r+r)/r)*(i*math.pi/72)) ctx.lineto(x2,y2); x1 = x2; y1 = y2; i++; } while (x2 != r-o && y2 != 0 ); ctx.stroke(); }
旋转 rotating
第二个介绍rotate
方法，它用于以原点为中心旋转 canvas。
rotate(angle)
这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到translate
方法。
rotate
的例子
在这个例子里，见下图，我用rotate方法来画圆并构成圆形图案。当然你也可以分别计算出 x 和 y 坐标(x = r*math.cos(a); y = r*math.sin(a))。这里无论用什么方法都无所谓的，因为我们画的是圆。计算坐标的结果只是旋转圆心位置，而不是圆本身。即使用rotate旋转两者，那些圆看上去还是一样的，不管它们绕中心旋转有多远。这里我们又用到了两层循环。第一层循环决定环的数量，第二层循环决定每环有多少个点。每环开始之前，我都保存一下 canvas 的状态，这样恢复起来方便。每次画圆点，我都以一定夹角来旋转 canvas，而这个夹角则是由环上的圆点数目的决定的。最里层的环有 6 个圆点，这样，每次旋转的夹角就是 360/6 = 60 度。往外每一环的圆点数目是里面一环的 2 倍，那么每次旋转的夹角随之减半。
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.translate(75,75); for (var i=1;i<6;i++){ // loop through rings (from inside to out) ctx.save(); ctx.fillstyle = 'rgb('+(51*i)+','+(255-51*i)+',255)'; for (var j=0;j<i*6;j++){ // drawindividual dots ctx.rotate(math.pi*2/(i*6)); ctx.beginpath(); ctx.arc(0,i*12.5,5,0,math.pi*2,true); ctx.fill(); } ctx.restore(); } }
缩放 scaling
接着是缩放。我们用它来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。
scale(x, y)
scale
方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。默认情况下，canvas 的 1 单位就是 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。
scale
的例子
这最后的例子里，我再次启用前面曾经用过的 spirograph 方法，来画 9 个图形，分别赋予不同的缩放因子。左上角的图形是未经缩放的。黄色图案从左到右应用了统一的缩放因子（x 和 y 参数值是一致的）。看下面的代码，你可以发现，我在画第二第三个图案时scale了两次，中间没有 restorecanvas 的状态，因此第三个图案的缩放因子其实是 0.75 × 0.75 = 0.5625。第二行蓝色图案堆垂直方向应用了不统一的缩放因子，每个图形 x 方向上的缩放因子都是 1.0，意味着不缩放，而 y 方向缩放因子是 0.75，得出来的结果是，图案被依次压扁了。原来的圆形图案变成了椭圆，如果细心观察，还可以发现在垂直方向上的线宽也减少了。第三行的绿色图案与第二行类似，只是缩放限定在横轴方向上了。
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.strokestyle = "#fc0"; ctx.linewidth = 1.5; ctx.fillrect(0,0,300,300); // uniform scaling ctx.save() ctx.translate(50,50); drawspirograph(ctx,22,6,5); ctx.translate(100,0); ctx.scale(0.75,0.75); drawspirograph(ctx,22,6,5); ctx.translate(133.333,0); ctx.scale(0.75,0.75); drawspirograph(ctx,22,6,5); ctx.restore(); // non uniform scaling (y direction) ctx.strokestyle = "#0cf"; ctx.save() ctx.translate(50,150); ctx.scale(1,0.75); drawspirograph(ctx,22,6,5); ctx.translate(100,0); ctx.scale(1,0.75); drawspirograph(ctx,22,6,5); ctx.translate(100,0); ctx.scale(1,0.75); drawspirograph(ctx,22,6,5); ctx.restore(); // non uniform scaling (x direction) ctx.strokestyle = "#cf0"; ctx.save() ctx.translate(50,250); ctx.scale(0.75,1); drawspirograph(ctx,22,6,5); ctx.translate(133.333,0); ctx.scale(0.75,1); drawspirograph(ctx,22,6,5); ctx.translate(177.777,0); ctx.scale(0.75,1); drawspirograph(ctx,22,6,5); ctx.restore(); } function drawspirograph(ctx,r,r,o){ var x1 = r-o; var y1 = 0; var i = 1; ctx.beginpath(); ctx.moveto(x1,y1); do { if (i>20000) break; var x2 = (r+r)*math.cos(i*math.pi/72) - (r+o)*math.cos(((r+r)/r)*(i*math.pi/72)) var y2 = (r+r)*math.sin(i*math.pi/72) - (r+o)*math.sin(((r+r)/r)*(i*math.pi/72)) ctx.lineto(x2,y2); x1 = x2; y1 = y2; i++; } while (x2 != r-o && y2 != 0 ); ctx.stroke(); }
变形 transforms
最后一个方法是允许直接对变形矩阵作修改。
m11 m21 dx m12 m22 dy 0 0 1
settransform(m11, m12, m21, m22, dx, dy)
这个方法必须重置当前的变形矩阵为单位矩阵，然后以相同的参数调用transform
方法。如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会抛出异常。
transform/settransform的例子
function draw() { var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var sin = math.sin(math.pi/6); var cos = math.cos(math.pi/6); ctx.translate(200, 200); var c = 0; for (var i=0; i <= 12; i++) { c = math.floor(255 / 12 * i); ctx.fillstyle = "rgb(" + c + "," + c + "," + c + ")"; ctx.fillrect(0, 0, 100, 10); ctx.transform(cos, sin, -sin, cos, 0, 0); } ctx.settransform(-1, 0, 0, 1, 200, 200); ctx.fillstyle = "rgba(255, 128, 255, 0.5)"; ctx.fillrect(0, 50, 100, 100); }
以上就是canvas游戏开发学习之七：变形的内容。