首页 > web前端 > H5教程 > HTML5每日一练之Canvas标签的应用-矩阵变换

HTML5每日一练之Canvas标签的应用-矩阵变换

WBOY
发布: 2016-05-17 09:09:06
原创
1214 人浏览过

       我们到现在为止,已经学习了利用坐标变换而实现的图形变换技术,当利用坐标变换不能满足我们的需要时,我们可以利用矩阵变换技术。接下来,我们将介绍更为复杂的矩阵变换变形技术。
       矩阵是用来专门实现图形变形的,它与坐标一起配合使用,达到变形的目的。当图形上下文被创建完毕时,事实上也创建了一个默认的变换矩阵,如果不对这个矩阵进行修改,那么接下来绘制的图形将以画布的最左上角为坐标原点进行绘制图形,绘制出来的图形也不经过缩放变形处理,但是如果对这个变换矩阵进行修改,那么情况就不一样了。

transform方法

  • context.transform(a, b, c, d, x, y);
此方法有6个参数,其中a, b, c, d这四个参数主要用来对图形进行变形;x, y表示移动的坐标点。

在上节使用坐标变换进行图形变形中所提到的三个方法:
translate(x, y);
scale(x ,y);
rotate(angle);
它们都可以使用transform方法来代替,套用context.transform(a, b, c, d, x, y);中的六个参入如下:
translate(x, y);
scale(a, d);
rotate(b, c);//此方法其实只有一个参数,在这里为了便于理解且对应transform,故使用剩余的2个参数,放在这里,是为了告诉大家,这两个参数作用差不多,都是与旋转有关
代码案例
  •    
  •         
  •         HTML5姣
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板