HTML5教程

当前位置: HTML5技术网 > HTML5教程 > HTML5每日一练之Canvas标签的应用-矩阵变换

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

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

transform方法
此方法有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每日一练之Canvas标签的应用-矩阵变换】相关文章

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

2. HTML5每日一练之Canvas标签的应用-绘制坐标变换图形

3. HTML5每日一练之Canvas标签的应用-坐标变换与路径结合使用

4. HTML5每日一练之Canvas标签的应用-在页面上放置Canvas

5. HTML5每日一练之Canvas标签的应用-绘制径向渐变图形

6. HTML5每日一练之Canvas标签的应用-绘制矩形

7. HTML5每日一练之Canvas标签的应用-绘制圆形

8. HTML5每日一练之Canvas标签的应用-绘制向日葵

9. HTML5每日一练之Canvas标签的应用

10. HTML5每日一练之Canvas标签的应用-绘制线性渐变图形

本文来源:https://www.51html5.com/a619.html

点击展开全部
上一篇:HTML5每日一练之Canvas标签的应用-绘制矩形 下一篇:HTML5每日一练之Canvas标签的应用-坐标变换与路径结合使用

﹝HTML5每日一练之Canvas标签的应用-矩阵变换﹞相关内容

「HTML5每日一练之Canvas标签的应用-矩阵变换」相关专题

矩阵 变换矩阵 canvas html5
复制网址 收藏网址 分享到微信 分享到微博 分享到QQ

其它栏目

HTML5教程 CSS3教程 JQUERY教程

也许您还喜欢