当前位置:Gxlcms > html代码 > Html5Canvas初探学习笔记(6)-变换

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

时间:2021-07-01 10:21:17 帮助过:9人阅读

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

1.平移:

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

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



首先,本篇介绍的方法都是状态值,也就是说他的作用域将影响它下面的所有代码,也可以使用saverestore来存储和弹出状态。上面介绍的是调用函数来解决平移的问题,下面介绍矩阵法,我们可以使用contexttransform方法来进行矩阵变化操作,它有六个参数,有些解释喜欢把它们解释为负责不同的操作,我更愿意从整体上介绍这六个参数,也就是说分别在平移,缩放和旋转时这些参数负责的是不同的,首先介绍整体,从整体上前四个参数负责缩放和旋转,后两个参数是平移,前四个参数14为一组,23为一组,12x值,34y值,56分别为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);

在这里第二句代码和第三句注掉的代码意义一样,之所以要在14这组和23这组中的一组里写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旋转角。

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

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

人气教程排行