4.4 图形变形
本节将介绍如何对画布进行操作以及如何对画布中的图形进行变形，以便设计复杂图形。
4.4.1 保存和恢复状态
视频讲解
Canvas状态存储在栈中，一个绘画状态包括两部分。
当前应用的变形，如移动、旋转和缩放，包括的样式属性：strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、globalCompositeOperation。
当前的裁切路径，参考4.5节介绍。
使用save()方法，可以将当前的状态推送到栈中保存，使用restore()方法可以将上一个保存的状态就从栈中弹出，恢复上一次所有的设置。
【示例】下面示例先绘制一个矩形，填充颜色为#ff00ff，轮廓颜色为蓝色，然后保存这个状态，再绘制另外一个矩形，填充颜色为#ff0000，轮廓颜色为绿色，最后恢复第一个矩形的状态，并绘制两个小的矩形，则其中一个矩形填充颜色必为#ff00ff，另外矩形轮廓颜色必为蓝色，因为此时已经恢复了原来保存的状态，所以会沿用最先设定的属性值，预览效果如图4.30所示。
图4.30 保存与恢复canvas状态
4.4.2 清除画布
视频讲解
使用clearRect()方法可以清除指定区域内的所有图形，显示画布背景，该方法用法如下。
context.clearRect(x,y,width,height);
参数说明如下：
x：要清除的矩形左上角的x坐标。
y：要清除的矩形左上角的y坐标。
width：要清除的矩形的宽度，以像素计。
height：要清除的矩形的高度，以像素计。
【示例】下面示例演示了如何使用clearRect()方法来擦除画布中的绘图。
在浏览器中的预览效果如图4.31所示，先是在画布上绘制一段弧线。如果单击“清空画布”按钮，则会清除这段弧线，如图4.32所示。
图4.31 绘制弧线
图4.32 清空画布
4.4.3 移动坐标
视频讲解
在默认状态下，画布以左上角（0,0）为原点作为绘图参考。使用translate()方法可以移动坐标原点，这样新绘制的图形就以新的坐标原点为参考进行绘制。其用法如下。
context.translate(dx, dy);
参数dx和dy分别为坐标原点沿水平和垂直两个方向的偏移量，如图4.33所示。
注意：在使用translate()方法之前，应该先使用save()方法保存画布的原始状态。当需要时可以使用restore()方法恢复原始状态，特别是在重复绘图时非常重要。
【示例】下面示例综合运用了save()、restore()、translate()方法来绘制一个伞状图形。
在浏览器中的预览效果如图4.34所示。可见，canvas中图形移动的实现，其实是通过改变画布的坐标原点来实现的，所谓的“移动图形”，只是“看上去”的样子，实际移动的是坐标空间。领会并掌握这种方法，对于随心所欲地绘制图形非常有帮助。
图4.33 坐标空间的偏移示意图
图4.34 移动坐标空间
4.4.4 旋转坐标
视频讲解
使用rotate()方法可以以原点为中心旋转canvas上下文对象的坐标空间，其用法如下。
context.rotate(angle);
rotate()方法只有一个参数，即旋转角度angle，旋转角度以顺时针方向为正方向，以弧度为单位，旋转中心为canvas的原点，如图4.35所示。
图4.35 以原点为中心旋转canvas
提示：如需将角度转换为弧度，可以使用degrees*Math.PI/180公式进行计算。例如，如果要旋转5°，可套用这样的公式：5*Math.PI/180。
【示例】在上节示例的基础上，下面示例设计在每次开始绘制图形之前，先将坐标空间旋转PI*(2/4+i/4)，再将坐标空间沿y轴负方向移动100，然后开始绘制图形，从而实现使图形沿一中心点平均旋转分布。在浏览器中的预览效果如图4.36所示。
图4.36 旋转坐标空间
4.4.5 缩放图形
视频讲解
使用scale()方法可以增减canvas上下文对象的像素数目，从而实现图形的放大或缩小，其用法如下。
context.scale(x,y);
其中x为横轴的缩放因子，y轴为纵轴的缩放因子，值必须是正值。如果需要放大图形，则将参数值设置为大于1的数值，如果需要缩小图形，则将参数值设置为小于1的数值，当参数值等于1时则没有任何效果。
【示例】下面示例使用scale(0.95,0.95)来缩小图形到上次的0.95，共循环80次，同时移动和旋转坐标空间，从而实现图形呈螺旋状由大到小的变化，预览效果如图4.37所示。
图4.37 缩放图形
4.4.6 变换图形
视频讲解
transform()方法可以同时缩放、旋转、移动和倾斜当前的上下文环境，用法如下所示：
context.transform(a,b,c,d,e,f);
参数说明如下：
a：水平缩放绘图。
b：水平倾斜绘图。
c：垂直倾斜绘图。
d：垂直缩放绘图。
e：水平移动绘图。
f：垂直移动绘图。
提示：
translate(x,y)可以用下面的方法来代替：
context.transform(0,1,1,0,dx,dy);
或：
context.transform(1,0,0,1,dx,dy);
其中dx为原点沿x轴移动的数值，dy为原点沿y轴移动的数值。
scale(x,y)可以用下面的方法来代替：
context.transform(m11,0,0,m22,0,0);
或：
context.transform(0,m12,m21,0,0,0);
其中dx、dy都为0表示坐标原点不变。m11、m22或m12、m21为沿x、y轴放大的倍数。
rotate(angle)可以用下面的方法来代替：
context.transform(cosθ,sinθ,- sinθ, cosθ,0,0);
其中的θ为旋转角度的弧度值，dx、dy都为0表示坐标原点不变。
setTransform()方法用于将当前的变换矩阵进行重置为最初的矩阵，然后以相同的参数调用transform方法，用法如下所示。
context.setTransform(m11, m12, m21, m22, dx, dy);
【示例】下面示例使用setTransform()方法将前面已经发生变换的矩阵首先重置为最初的矩阵，即恢复最初的原点，然后再将坐标原点改为（10,10），并以新的坐标为基准绘制一个蓝色的矩形。
在浏览器中的预览效果如图4.38所示。在本例中，使用scale(0.95,0.95)来缩小图形到上次的0.95，共循环89次，同时移动和旋转坐标空间，从而实现图形呈螺旋状由大到小的变化。
图4.38 矩阵重置并变换