`
isiqi
  • 浏览: 15946130 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

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);

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


首先,本篇介绍的方法都是状态值,也就是说他的作用域将影响它下面的所有代码,也可以使用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旋转角。

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

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


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics