Html5 Canvas初探学习笔记(6) -变换

小满（bill man）个人原创，欢迎转载，转载请注明地址，小满（bill man）的专栏地址http://blog.csdn.net/bill_man

在html5中，可以实现多种的图形变换包括平移，缩放和旋转。可以通过两种方式，分别是矩阵法和函数法，以下分别介绍平移，缩放和旋转用这两种方法实现。

1.平移：

context.fillRect(50,50,50,50);

context.translate(100,100);

context.fillRect(50,50,50,50);

如果没有中间这句你看到的效果会是只有一个矩形，因为第一个矩形和第二个矩形重合了，现在的效果是进行了平移，效果如下：

首先，本篇介绍的方法都是状态值，也就是说他的作用域将影响它下面的所有代码，也可以使用save和restore来存储和弹出状态。上面介绍的是调用函数来解决平移的问题，下面介绍矩阵法，我们可以使用context的transform方法来进行矩阵变化操作，它有六个参数，有些解释喜欢把它们解释为负责不同的操作，我更愿意从整体上介绍这六个参数，也就是说分别在平移，缩放和旋转时这些参数负责的是不同的，首先介绍整体，从整体上前四个参数负责缩放和旋转，后两个参数是平移，前四个参数1，4为一组，2，3为一组，1和2是x值，3和4是y值，5和6分别为x,y的平移，上面的代码如果用矩阵就按下面的方法写：

context.fillRect(50,50,50,50);

context.transform(1,0,0,1,100,100);

//context.transform(0,1,1,0,100,100);

context.fillRect(50,50,50,50);

在这里第二句代码和第三句注掉的代码意义一样，之所以要在1，4这组和2，3这组中的一组里写1，是因为我们要保证矩形不被缩放，如果是0的话则大小被缩放为0。

2.缩放

context.fillRect(50,50,50,50);

context.translate(150,50);

context.scale(0.5,0.5);

context.fillRect(0,0,50,50);

缩放和旋转都要用到平移，这是因为我们如果用如下的代码写会出现问题

context.fillRect(50,50,50,50);

context.scale(0.5,0.5);

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

这个代码貌似和上面的代码一样，但实际上不一样，因为当你调用context.scale以后，所有的坐标都会缩放，会使原来的一半，所以就会和下面的效果不同

以下是第一段代码和第二段的对比：

可以看出后一张图发生了错位。

下面介绍矩阵法：

context.fillRect(50,50,50,50);

context.transform(0,0.5,0.5,0,150,50);

//context.transform(0.5,0,0,0.5,150,50);

context.fillRect(0,0,50,50);

和上面的一样，注掉的代码效果是一样的，同样的，也需要先平移，同样的，第一个参数和第四个参数这组和第二个第三个参数这组是一样的。

3.旋转

context.fillRect(50,50,50,50);

context.translate(150,50);

context.rotate(Math.PI/4);

context.fillRect(0,0,50,50);

如下的代码可以实现旋转，同样的原因，也需要先平移，旋转的角度使用弧度制，效果如下：

下面介绍的是使用矩阵法：

context.fillRect(50,50,50,50);

context.transform(Math.cos(Math.PI/4),Math.sin(Math.PI/4),-Math.sin(Math.PI/4),Math.cos(Math.PI/4),150,50);

//context.transform(-Math.sin(Math.PI/4),Math.cos(Math.PI/4),Math.cos(Math.PI/4)

//,Math.sin(Math.PI/4),150,50);

context.fillRect(0,0,50,50);

两组参数分别为cos旋转角，sin旋转角，负的sin旋转角，cos旋转角，或者为负的sin旋转角，cos旋转角，cos旋转角，sin旋转角。

如有错误，希望大家多多指正

下一篇继续研究绘制的高级功能