它是将图像进行平移，x是水平方向平移的距离，y是垂直方向平移的距离

ctx.save();
ctx.translate(50,50);
ctx.beginPath();
ctx.strokeRect(10,10,20,20); ctx.closePath();
ctx.restore();

效果图为：

本来这个矩形应该绘制在左上角，经过图形变换把其向x,y两个方向各偏移了50像素（PS：需要注意的是图形变换的函数调用，要在绘制函数之前执行）

2、rotate

context.rotate(rot);

该方法是用来设置图片的旋转角度，其中rot应该是弧度，若传入的是角度的话需要转换，如80，需要些为Math.PI*80/180

ctx.save(); ctx.rotate(20*Math.PI/180); ctx.beginPath(); ctx.fillRect(100,100,50,50); ctx.closePath(); ctx.restore();

效果图为：

　　向顺时针方向偏移了20度

3、scale

context.scale(x,y)

该方法是用来进行图像缩放的，其中x为水平方向缩放的比例，y是垂直方向缩放的比例

（PS： 该函数存在一个问题，就是在缩放时，图像的左上角的位移也会发生同样比例的改变并且图像的边框线也会发生同样的改变）

ctx.save(); ctx.scale(0.5,0.5); ctx.beginPath(); ctx.fillRect(100,100,200,200); ctx.closePath(); ctx.restore();

就是将正方形的x和y方向均缩放到一半的大小

4、transform

context.transform(a,b,c,d,e,f);

首先该方法是上述方法的总和，因为该方法是通过单位矩阵的方式对图像进行改变，图像在本质上就是许多由0,1的矩阵组合而成，如下表格

a c e

b d f

0 0 1

a代表水平缩放，默认为1；b代表水平倾斜，默认为0；c代表垂直倾斜，默认为0；

d代表垂直缩放，默认为1；e代表水平位移，默认为0；f代表垂直位移，默认为0；

所以用transfrom函数可以实现，上面3种图像变换。

四、其它杂七杂八

1、文字显示

ctx.fillText(string,x,y,[maxlen]);

ctx.strokeText(string,x,y,[maxlen]);

其中第一个函数是需要写出的文本值，其中x，y是文本的坐标。而maxlen是可选参数，设置其文字的最大长度。

其文字可以设置相关参数

ctx.font的默认值是"20px sans-serif"

其参数包括context.font = font-style font-variant font-weight

font-size font-family其中各个参数有个字的值

context.textAlign = left center right该属性是设置文字的居中、居左、居右

context.textBaseline = top middle bottom该属性是设置文字的垂直居上、居中、居下。

ctx.beginPath(); var str = "古月枫" ctx.strokeStyle = "red"; ctx.fillStyle = "aqua"; ctx.font = "40px Arial"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.strokeText(str,100,100,200); ctx.fillText(str,100,150,200); ctx.closePath();

效果图为：

2、阴影

在canvas中并没有一个针对阴影的函数，它是通过状态进行添加，无论是线条、矩形、圆或者是文字都可以通过以下函数添加阴影效果

ctx.shadowColor = "gray"; //设置阴影背景的颜色

ctx.shadowOffsetX = 10; //设置阴影x轴方向的突出像素，该值可以为负数

ctx.shadowOffsetY = 10; //意思同上，只不过这个是针对Y轴的

ctx.shadowBlur = 5; //设置阴影的模糊程度，0为无模糊，值越大模糊越重

ctx.beginPath(); var str = "古月枫" ctx.fillStyle = "aqua"; ctx.font = "40px Arial"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.shadowColor = "gray"; ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.shadowBlur = 3; ctx.fillText(str,100,150,200); ctx.closePath();

效果图为：

3、全局变量，透明度

ctx.globalAlpha设置全局的透明度，它的默认值为1，而将其改变为0到1的值时，画布上的图形就有了透明效果。由其作用范围为全局，所以要用save()和restore()方法进行包裹使用

4、剪辑 ctx.clip();

这个功能只有上面所说的一个函数，它是与lineTo、fillRect、arc等可绘制闭合空间的函数混用，其用处是为了canvas只能在一个封闭的空间内进行绘制，超出这个空间的图形绘制不显示，比较常用的运用方式是制作探照灯的效果。

ctx.save(); ctx.beginPath(); ctx.arc(200,200,100,0,Math.PI*2); ctx.clip(); ctx.fillStyle = "chartreuse"; ctx.fillRect(100,100,200,200); ctx.closePath(); ctx.restore();

效果图为：

先定义了一个圆形的剪辑区域，然后画了一个大范围的正方形，但是只能显示这个圆形范围的图像

5、交互