javascript - 从单个点拉伸(stretch)/扭曲背景图像

Question

通常当在 javascript 或 css3 中调整图像大小时(使用 background-size)，它会从中心点拉伸(stretch)图像。我需要从可能位于任何地方的单个点拉伸(stretch)和扭曲图像。它将是动态的，所以我不想求助于使用单独的图像。

这是一张说明我的意思的图片:

希望那里有答案!

Answer 1

您有几个选项可以实现此效果。

“正确”的方法是使用 Canvas 绘制图像:Skewing images individually using canvas

另一种方法是使用 CSS 变换倾斜来伪造效果。 http://developerdrive.com/demo/skewing_elements/skewing_elements.html

您可以在带有“溢出:隐藏”的元素内执行此操作，使其看起来像背景图像。