【HTML5】使用Canvas绘制坐标变换图形

熟悉Photoshop的朋友都不会对它的自由变换功能（快捷键是Ctrl+T）感到陌生，因为这个功能可以让你任意的变形一张图案，无限的发挥你的想象和创意。那么，当我们在使用Canvas绘制图形的时候，是否可以做到这一点呢？答案是肯定的。使用Canvas API的坐标轴变换处理功能，就能实现自由变化的效果。

我们知道，在Photoshop上绘制图形的时候，是以坐标点为基准来进行绘制的，默认情况下Canvas画布的最左上角对应于坐标轴的原点(0, 0)。在此之前的文章中，我们所讲的所有利用Canvas API绘制出来的图形都是以画布最左上交为坐标轴圆点，并以像素为单位来进行绘制的。

既然知道了坐标轴的原点，那么我们就可以按照Photoshop上面的变形方式一样，对Canvas画布进行变形。Canvas对坐标的变换处理有以下三种方式：

一、平移

使用图形上下文对象的translate方法移动坐标轴原点，该方法定义如下：

x:表示横坐标，也就是将坐标轴x从原点向左移动多少个单位，默认以像素为单位；

y:表示纵坐标，也就是将坐标轴y从原点向下移动多少个单位，默认以像素为单位。

二、扩大

使用图形上下文对象的scale方法将图形放大，该方法的定义如下所示：

x:表示横坐标，也就是在水平方向上将图形放大多少倍；

y:表示纵坐标，也就是在垂直方向上将图形放大多少倍。

必须要注意的是，将图形缩小的时候，将这两个参数设置为0-1之间的小数就可以了，比如，0.5表示将图形缩小一半。

三、旋转

使用图形上下文对象的rotate方法将图形进行旋转，该方法的定义如下所示：

angle是指旋转的角度，旋转的中心点是坐标轴的原点，旋转方向为顺时针进行，要想逆方旋转，只需要设置为负数即可。

下面我们将3个自由变化效果放到一个Canvas标签中演示一下：

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

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

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

相关文章