【第22期】观点:IT 行业加班,到底有没有价值?

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

原创 2012年03月27日 22:50:10

小满(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旋转角。

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

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


版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

Html5 Canvas初探学习笔记(12) -图片裁减和调整

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 上一篇讲了图片的两种操作,读入和导出,而...

Html5 Canvas初探学习笔记(1)-画一个矩形

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man canvas元素是Html5相对于之前的
  • isiqi
  • isiqi
  • 2012-03-19 22:31
  • 358

欢迎关注CSDN程序人生公众号

关注程序员生活,汇聚开发轶事。

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

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 在html5中,可以实现多种的图形变换包括平移,缩放和旋转。可以通过两种方式,分别是矩阵法和函数法,以下分别介绍平移,缩放和旋转用这两种方法实现。 1.平移: context.fillRect(50,50,50,50);
  • isiqi
  • isiqi
  • 2012-03-27 22:50
  • 310

Html5 Canvas初探学习笔记(13) -图片变换

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 之前的图形变换中的那些操作的状态值,在图片操...

Html5 Canvas初探学习笔记(4) -清除屏幕

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 有些时候,我们需要清除部分或者全部的屏幕,类似于j2me的setcilp函数,在<span style="font-family: Times N
  • isiqi
  • isiqi
  • 2012-03-22 22:05
  • 375
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)