12.17 HTML Canvas图像变形

和图形一样,图像也支持几何变换

在画布中绘制图像之后,我们就可以对它执行所有的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像素位置(从右到左)。

使用负值缩放变形翻转图像