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初探学习笔记(13) -图片变换

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

HTML5 canvas 绘制矩形 改变矩形颜色

HTML5 canvas 绘制矩形 改变矩形颜色
  • SunmmerSoftware
  • SunmmerSoftware
  • 2016年04月20日 18:36
  • 373

canvas变换

概述要运用好canvas绘图,不仅需要使用前面说到的canvas的基本绘制,也必须使用好canvas的变换。Canvas的变换有 平移(translate),旋转(rotate),缩放(scale),...
  • cquwentao
  • cquwentao
  • 2016年05月10日 15:39
  • 4851

HTML5 Canvas 初探

仅仅只是一个简单的hello world.js代码很简单: canvas1 //@author 杨虹昌 //测试浏览器是否支持canvas function can...
  • yhc13429826359
  • yhc13429826359
  • 2013年10月28日 00:25
  • 1317

Html5 Canvas初探学习笔记(5) -绘图状态

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 在之前的文章中,提到过一些绘图的状态值,...
  • bill_man
  • bill_man
  • 2012年03月23日 22:15
  • 3546

Html5 Canvas初探学习笔记(15) -鼠标事件

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 本篇完成这样一个例子,让主角随着鼠标移动...
  • bill_man
  • bill_man
  • 2012年04月10日 22:38
  • 9878

Html5 Canvas初探学习笔记(7) -合成

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 本篇介绍另外两个绘制的状态值,分别是全局...
  • bill_man
  • bill_man
  • 2012年03月28日 21:48
  • 3487

Html5 Canvas初探学习笔记(8) -阴影

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 本篇继续介绍html5的一些状态值,ht...
  • bill_man
  • bill_man
  • 2012年03月29日 21:39
  • 4374

Html5 Canvas初探学习笔记(9) -渐变

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 本篇继续介绍html5的绘制效果,和之前介绍...
  • bill_man
  • bill_man
  • 2012年03月31日 22:49
  • 3927

Html5 Canvas初探学习笔记(10) -复杂路径

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 之前已经介绍过简单的绘制路径,本篇介绍绘...
  • bill_man
  • bill_man
  • 2012年04月01日 22:23
  • 4307
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Html5 Canvas初探学习笔记(6) -变换
举报原因:
原因补充:

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