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

在 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.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 旋转角。

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

以上就是Html5 Canvas初探学习笔记(6) -变换的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

查看更多关于Html5Canvas初探学习笔记(6)-变换的详细内容...