canvas基础学习（一） - 古月枫(2)_H5之家 - 中国HTML5教程资源分享第一站

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

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为无模糊，值越大模糊越重