16．图像变形

在画布中绘制图像之后，我们就可以对它执行所有的2D渲染上下文方法。变形作为一组方法使我们能够在图像上做出一些非常漂亮的效果。前面我们已经知道了变形的工作原理，所以现在可以继续学习如何使用它们来操作图像。

平移

这是到目前为止最简单的图像变形方法：

context.translate(100, 100); 
var image = new Image(); 
image.src = "example.jpg"; 
$(image).load(function() 
{ 
    context.drawImage(image, 0, 0, 500, 500, 0, 0, 300, 300); 
});

它在绘制图像之前将画布平移(参见图1)。

旋转

以前，在浏览器中旋转图像是很难实现的，但是利用画布这个操作变得很容易（参见图2）。

context.translate(250, 250); 
context.rotate(0.7854); // Rotate 45 degrees
var image = new Image(); 
image.src = "example.jpg"; 
$(image).load(function() { 
    context.drawImage(image, 0, 0, 500, 500, -150, -150, 300, 300); 
}); 

同样，这段代码中并没有什么新东西。其中最有意思的是这些方法可用来处理之前平淡无奇的静态图像。

缩放与翻转

所有的变形方法中最随机的一个就是完全翻转图像。例如，通过各种方式对同一图像进行翻转，可以创建出万花筒效果（参见图3）。

var image = new Image(); 
image.src = "example.jpg"; 
$(image).load(function() { 
    // Top left 
    context.translate(50, 50); 
    context.drawImage(image, 0, 0, 500, 500, 0, 0, 200, 200); 
    // Bottom left 
    context.setTransform(1, 0, 0, 1, 0, 0); // Reset the transformation matrix 
    context.translate(50, 450); 
    context.scale(1, -1); 
    context.drawImage(image, 0, 0, 500, 500, 0, 0, 200, 200); 

    // Bottom right 
    context.setTransform(1, 0, 0, 1, 0, 0); 
    context.translate(450, 450); context.scale(-1, -1); 
    context.drawImage(image, 0, 0, 500, 500, 0, 0, 200, 200); 

    // Top right 
    context.setTransform(1, 0, 0, 1, 0, 0); 
    context.translate(450, 50); 
    context.scale(-1, 1); 
    context.drawImage(image, 0, 0, 500, 500, 0, 0, 200, 200); 
}); 

这段代码太长了可能有点难以理解，但是其过程实际上很简单。它所执行的操作就是在4个不同位置绘制同一个图像，每一个都具有不同的缩放因子。加果使用负数缩放因子，就会使图像翻转。一定要记住，当图像翻转时，原点会转到图像右边，所以你必须移动原点进行补偿，以便从右到左进行绘制。例如，右上角的图像是在位置(450，50)上绘制的，因为它已经在x轴方向翻转，这意味着现在它是从x轴450像素位置画到x轴250像素位置（从右到左）。

这个过程有点违反直觉，但是这确实是一种能够创建有趣图像效果的简单方法。例如，它完全可以用来在画布中绘制出人造的反射效果。

发布时间：2013/2/1 下午9:57:19  阅读次数：7782