绘制成画布形状的图像

Question

我在画布上创建了一个形状，并希望在其中绘制图像。

到目前为止，我可以将图像裁剪为形状，但是我希望图像可以通过“自由变换”->“扭曲”效果或类似的方式自我调整。

在示例中：

• 左边的图像是被剪切的图像。
• 右边的图像是原始图像。
• 最下面的图像是我想要实现的结果。

该代码可以在这里看到： http : //jsfiddle.net/NAe9c/

代码结果可以在这里看到： http : //www.tribalddb.pt/final.jpg

编辑：
谢谢你们
我接受了该问题的答案，但是找到了我的问题的另一种选择CSS 3D。 直到现在我才知道= P

Answer 1

是的，您可以将事物平放并透视显示。 您不能仅通过2D转换来做到这一点，因此，如果您想使用2D上下文，那么折磨就有些麻烦了，但是没有什么疯狂的。

我建议搜索“画布透视变换”，您会发现很多示例，如下所示：

http://tulrich.com/geekstuff/canvas/perspective.html

Answer 2

您将需要对诸如此类的东西进行透视校正，我认为，考虑使用以下方法，让一个图书馆为您做起来会更容易。

three.js所