HTML5 绘制图形【4】

绘制变形图形

坐标变换

绘制图形的时候，我们可能会想要旋转图形，或对图形使用变形处理，使用Canvas API的坐标轴变换处理功能，可以实现这种效果。

在计算机上绘制图形的时候，是以坐标单位为基准来进行图形绘制的。默认情况下，Canvas画布的最左上角对应于坐标轴原点(0, 0)。如果对这个坐标使用变换处理，就可以实现图形的变形处理了。对坐标的变换处理有三种方式：

平移

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

Js代码  

1. context.translate(x, y);  

该方法使用两个参数，x表示将坐标轴原点向左移动多少个单位，默认情况下为像素；y表示将坐标轴原点向下移动多少个单位。

缩放

使用图形上下文对象的scale()方法将图形进行缩放。该方法的定义如下：

Js代码  

1. context.scale(x, y);  

该方法使用两个参数，x是水平方向的缩放倍数，y是垂直方向的缩放倍数。要缩小图形的时候，将这两个参数设置为0到1之间的小数就可以了，例如0.5是指将图形缩小一半。

旋转

使用图形上下文对象的rotate()方法将图形进行旋转。该方法的定义如下：

Js代码  

1. context.rotate(angle);  

该方法接受一个参数，该参数是指放置的角度，放置的中心是坐标轴的原点。放置是以顺时针方向进行的，要想逆时针旋转时，将该参数设置为负数就可以了。

坐标变换示例如下所示：

Js代码  

1. Canvas.prototype.translate = function(x, y) {  
2.     this.context.translate(x, y);  
3.     return this;  
4. };  
5.   
6. Canvas.prototype.scale = function(x, y) {  
7.     this.context.scale(x, y);  
8.     return this;  
9. };  
10.   
11. Canvas.prototype.rotate = function(x, y) {  
12.     this.context.rotate(x, y);  
13.     return this;  
14. };  
15.   
16. $(function() {  
17.     var canvas = new Canvas("draw");  
18.     canvas.fillStyle("#EEEEFF").fillRect(0, 0, 400, 400).translate(200, 50).fillStyle('rgba(255, 0, 0, 0.25)');  
19.     for(var i = 0; i < 50; i++) {  
20.         canvas.translate(25, 25).scale(0.95, 0.95).rotate(Math.PI / 10).fillRect(0, 0, 100, 50);  
21.     }  
22. });  

坐标变换与路径的结合使用

如果要对矩形进行变形，使用坐标变换就足够了。但是对使用路径绘制出来的图形进行变换的时候，要考虑的事情就比较多了。因为使用了坐标变换之后，已经创建好的路径就不能用了。必须要重新创建路径。重新创建路径之后，坐标变换方法又失效了。这时必须先另外写一个创建路径的函数，然后在坐标变换的同时调用该函数，这样才能解决这个问题。使用示例如下所示：

Js代码  

1. $(function() {  
2.     var create5Star = function(context) {  
3.         var dx = 100, dy = 0, x, y, s = 50, dig = Math.PI / 5 * 4;  
4.         context.beginPath().fillStyle('rgba(255, 0, 0, 0.5)');  
5.         for(var i = 0; i < 5; i++) {  
6.             x = Math.sin(i * dig) * s + dx;  
7.             y = Math.cos(i * dig) * s + dy;  
8.             context.lineTo(x, y);  
9.         }  
10.         context.closePath();  
11.     };  
12.       
13.     var canvas = new Canvas("draw");  
14.     canvas.fillStyle("#EEEEFF").fillRect(0, 0, 400, 400).translate(200, 50);  
15.     for(var i = 0; i < 50; i++) {  
16.         create5Star(canvas.translate(25, 25).scale(0.95, 0.95).rotate(Math.PI / 10));  
17.         canvas.fill();  
18.     }  
19. });  

矩阵变换

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

Js代码  

1. context.transform(m11, m12, m21, m22, dx, dy);  

该方法使用一个新的变换矩阵与当前变换矩阵进行乘法运算。其中m11, m21, m12, m22四个参数用来修改使用这个方法之后，绘制图形时的计算方法，以达到变形目的，dx与dy参数移动坐标原点，默认以像素为单位。上面所使用坐标变换进行图形变形的技术中所提到的三个方法，实际上是隐式地修改了变换矩阵，都可以使用transform()方法来进行代替。

translate(x, y)

可以使用context.transform(1, 0, 0, 1, x, y)或context.transform(0, 1, 1, 0, x, y)方法进行代替，前面四个参数表示不对图形进行缩放操作，变形操作，将dx, dy设置为x, y表示将坐标原点移至此处。

scale(x, y)

可以使用context.transform(x, 0, 0, y, 0, 0)或context.transform(0, y, x, 0, 0, 0)方法代替，前面四个参数表示将图形横向扩大x倍，纵向扩大y倍。dx, dy为0表示不移动坐标原点。

rotate(angle)

替代方法如下所示：

Js代码  

1. context.transform(Math.cos(angle * Math.PI / 180), Math.sin(angle * Math.PI / 180), -Math.sin(angle * Math.PI / 180), Math.cos(angle * Math.PI / 180), 0, 0);  
2. // 或者  
3. context.transform(-Math.sin(angle * Math.PI / 180), Math.cos(angle * Math.PI / 180), Math.cos(angle * Math.PI / 180), Math.sin(angle * Math.PI / 180), 0, 0);  

其中前四个参数以三角函数的形式结合起来，共同完成图形按angle角度的顺时针旋转处理，dx, dy为0表示不移动坐标原点。

使用了transform()方法后，接下来要绘制的图形都会按照移动后的坐标原点与新的变换矩阵相结合的方法进行绘制，必要时可以使用setTransform()方法将变换矩阵进行重置，该方法的定义如下所示：

Js代码  

1. context.setTransform(m11, m12, m21, m22, dx, dy);  

该方法的参数及参数 用法与transform()相同，事实上，该方法的作用为将画布上的最左上角重置为坐标原点，当图形上下文创建完毕时将所创建的初始变换矩阵设置为当前变换矩阵，然后使用transform()方法。