12.17 HTML Canvas图像变形
优质
小牛编辑
130浏览
2023-12-01
在画布中绘制图像之后，我们就可以对它执行所有的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像素位置（从右到左）。