【HTML5】Canvas标签应用之矩阵变换

到目前为止，我们已经学习了利用坐标变换来实现的图形变换技术，那么，当利用坐标变换不能满足我们的需要时，该怎么办呢？我们可以利用矩阵变换技术来进行图形变换。接下来，我们将介绍更为复杂的矩阵变换技术。

矩阵是用来专门实现图形变形的，它与坐标一起配合使用，达到变形的目的。当图形上下文被创建完毕时，事实上也创建了一个默认的变换矩阵，如果不对这个矩阵进行修改，那么接下来绘制的图形将以画布的最左上角为坐标原点进行绘制图形，绘制出来的图形也不经过缩放变形处理，但是如果对这个变换矩阵进行修改，那么情况就不一样了。

矩阵变换的方法是transform：

代码如下：

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

其实在之前的文章中，我们提到的使用坐标变换进行图形变形的三个方法都可以使用transform方法来进行替换。例如：

translate(x, y);——translate(x, y);

scale(x ,y);——scale(a, d);

rotate(angle);——rotate(b, c);（此方法其实只有一个参数，在这里为了便于理解且对应transform，故使用剩余的2个参数，放在这里，是为了告诉大家，这两个参数作用差不多，都是与旋转有关。）

来看案例啦：

注意：该文档使用的文字编码是GB2312，测试时请注意兼容；由于目前支持HTML5的浏览器还不是很多，请各位在查看演示案例的时候使用Firefox10或者Oprea11等高版本浏览器。

感谢HTML5中国提供源代码，我爱猫猫技术博客整理编辑，转载请注明出处，文章地址：；欢迎给我们投稿，邮箱地址：kokomao@sohu.com或者maomao5790@sohu.com。

本文转自：我爱猫猫技术博客 非本站原创 如果侵犯了您的权力 请Email：13612963@qq.com 告知

相关文章