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)。

图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); 
}); 

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

图2 旋转图像

缩放与翻转

所有的变形方法中最随机的一个就是完全翻转图像。例如,通过各种方式对同一图像进行翻转,可以创建出万花筒效果(参见图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像素位置(从右到左)。

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

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

文件下载(已下载 2302 次)

发布时间:2013/2/1 21:57:19  阅读次数:6991

2006 - 2024,推荐分辨率1024*768以上,推荐浏览器Chrome、Edge等现代浏览器,截止2021年12月5日的访问次数:1872万9823 站长邮箱

沪ICP备18037240号-1

沪公网安备 31011002002865号