图像绘制成帆布形状

Question

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

到目前为止，我可以将图像剪切到形状，但我希望图像能够通过自由变换自我调整 - ＆gt;扭曲效果或类似的东西。

在示例中：

• 左侧的图像是剪裁的图像。
• 右侧的图像是原始图像。
• 底部图像是我想要达到的结果。

可在此处查看代码：http://jsfiddle.net/NAe9c/

可在此处查看代码结果：http://www.tribalddb.pt/final.jpg

已编辑：
谢谢大家 我接受了这个问题的答案，但我找到了另一个替代我的问题，CSS 3D。 直到现在我才知道它= P

Answer 1

是的，你可以把东西拉平并让它们透视呈现。你不能简单地用2D变换做到这一点，所以如果你想使用2D上下文但没有什么是疯狂的，那么对于考验有一点数学。

我建议搜索“canvas perspective transform”，你会发现很多演示，比如这个：

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

Answer 2

你需要对这样的事情进行透视校正，我认为让你更容易找到它，考虑使用：

Three.js