html5基础入门教程之canvas变型

ctx.save(); //保存当前状态

ctx.fillStyle=‘#fff’; //设置填充色为白色

ctx.globalAlpha=0.5; //透明度设置为0.5

ctx.fillRect(45,45,90,90); //绘制正方形

ctx.restore(); //恢复栈中的第一个状态值，即最后一个保存的状态，为设置填充色为蓝色

ctx.fillRect(60,60,60,60); //绘制60*60的蓝色正方形

ctx.restore(); //恢复栈中的第二个值，在本例中即第一个保存的状态，填充色默认为黑色

ctx.fillRect(75,75,30,30); //绘制一个30*30的黑色正方形

}

}

这个例子第一步是绘制了一个起始位置坐标为(15,15)，大小为150*150的正方形。它没有设置填充色，默认填充了黑色。第二步调用了save()方法。该方法记录了这是的状态，即fillStyle的值，即为默认的黑色。第三步设置fillStyle值为’#09f’，以此为填充色绘制了一个起始位置坐标为(30,30)，大小为120*120的正方形。第四步又调用了一次save()方法，此时的状态也将被推入状态栈中，即保存了填充色’#09f’。第五步绘制了一个起始坐标为(45,45)、背景色为白色、透明度为0.5、大小为90*90的正方形。第六步调用restore()方法，恢复最后一次保存的状态，绘制了一个蓝色正方形，它的起始位置为(60,60)，大小为60*60。最后又调用了一次restore()方法，恢复第一次保存的状态，绘制了一个黑色正方形，它的起始位置为(75,75)，大小为30*30.

移动

在canvas中用于移动的方法是translate()方法，该方法用来移动canvas和它的原点到一个不同的位置。

translate(x,y);

该方法有两个参数，分别x方向和y方向的偏移量。

看一个translate()方法的例子：

function draw(){

var canvas=document.getElementById(‘test_translate’);

if(canvas.getContext){

var ctx=canvas.getContext(‘2d’);

ctx.fillRect(10,10,100,50);

ctx.translate(70,70);

ctx.fillRect(10,10,100,50);

}

}

上面的例子先是绘制了一个100*50的矩形，它的原点位置是(10,10)。然后用translate()方法将其原点移至(70,70)。接着又绘制了一个100*50的矩形，它距离原点的位置是(10,10)，所以，第二个矩形开始绘制的位置就应该是(80,80)；

旋转

rotate()方法用以实现以原点为中心的旋转。

rotate(angle);

该方法只接受一个参数，表示要旋转的角度，以弧度为单位。如果传入的参数是正数，则表示顺时针旋转；如果是负数，则表示逆时针旋转。

默认情况下，旋转的中心始终是原点(0,0)，如果想改变旋转的中心，则必须使用translate()将原点移动到指定的位置，再进行旋转。

来看一个rotate()方法的例子：

function draw(){

var canvas=document.getElementById(‘test_rotate’);

if(canvas.getContext){

var ctx=canvas.getContext(‘2d’);

ctx.fillRect(150,50,50,50);

ctx.rotate(Math.PI/6);

ctx.fillRect(150,50,50,50);

}

}

这个例子，在画布没旋转之前，先绘制了一个距离原点位置为(150,50)、大小为50*50的正方形。然后旋转画布30°即Matb.PI/6，再绘制一个一样的正方形。从上图中可以看到两者的区别。注意，这里的原点是(0,0)。

缩放

scale()方法用于实现画布的缩放。

scale(x,y);

该方法接受两个参数，分别表示x方向和y方向缩放的比例。它们必须都是正值。值小于1，表示缩小；值大于1，表示放大；值等于1时，表示没有缩放。

来看一个scale()方法的例子：

function draw(){

var canvas=document.getElementById(‘test_scale’);

if(canvas.getContext){

var ctx=canvas.getContext(‘2d’);

ctx.fillRect(10,10,50,50);

ctx.scale(0.5,1.5);

ctx.fillRect(150,10,50,50);

}

}

上面的例子显示绘制了一个距离原点(10,10)、大小50*50的正方形。然后进行缩放操作，将x方向缩小，y方向放大。然后再在离原点(75,15)(这里坐标已经做了缩放，150*0.5=75,10*1.5=15)的位置绘制一个25*75(50*0.5=25,50*1.5=75)的矩形。二者进行对比，就可以看出scale()是怎样变化的了。

变形

最后一个方法是变形。

transform(m11,m12,m21,m22,dx,dy);

画布上每个对象都有一个当前的变换矩阵。

调用transform()方法必须将当前的变换矩阵乘以传入的变换矩阵，对上面介绍的参数而言，传入的变形矩阵是这样的：

其中，m11表示水平缩放绘制；m12表示水平倾斜绘制；m21表示垂直倾斜绘制；m22表示垂直缩放绘制；dx表示水平移动绘制；dy表示垂直移动绘制。

换句话说，transform允许缩放、移动、旋转、倾斜当前环境。其实transform就是这几种的组合变换。当然，我们可以把这transform拆分上述三种变换，对应的矩阵计算公式如下：

还有一点需要注意，改变换只会影响调用transform()方法之后所绘制的图形。

来看一个例子：

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。