javascript - 如何像这样倾斜图像

Question

我想像这样扭曲图像 我需要为 context.setTransform 设置什么参数？

Answer 1

您无法通过单个 2D 变换实现此目的。

二维变换允许您通过将第二个参数中的倾斜 Angular 正切值传递给 setTransform() 来“向上”或“向下”倾斜图像，但您希望在对称方式(导致“向近”和/或“向远”变形)。您需要 3D 转换才能做到这一点。

但是，您可以通过将图像切成几个水平“带”并在渲染每个带时应用不同的变换来模拟相同的结果。离图像一半更远的波段将应用更强的倾斜 Angular 。像这样的东西:

var width = image.width,
    height = image.height,
    context = $("canvas")[0].getContext("2d");
for (var i = 0; i <= height / 2; ++i) {
    context.setTransform(1, -0.4 * i / height, 0, 1, 0, 60);
    context.drawImage(image,
        0, height / 2 - i, width, 2,
        0, height / 2 - i, width, 2);
    context.setTransform(1, 0.4 * i / height, 0, 1, 0, 60);
    context.drawImage(image,
        0, height / 2 + i, width, 2,
        0, height / 2 + i, width, 2);
}

请注意， strip 是两个像素高而不是一个像素，以避免波纹效应。

您可以在this fiddle 中看到结果.