如何用html5画布进行透视图

Question

我想在html5画布中将图像变成倾斜/透视/旋转。下面的图片正是我想要做的。

我有这个代码在画布中使用转换，但我不能用它做头或尾。有人能帮助我吗？

此外，我只希望在HTML5 Canvas中完成此操作而不是css。

var cs = Math.cos(angle1), sn = Math.sin(angle1);
var h = Math.cos(angle2);

var a = 100*cs, b = -100*sn, c = 200;
var d = h*100*sn, e = h*100*cs, f = 200;

ctx.setTransform(a, d, b, e, c, f);

Answer 1

不幸的是，无法使用画布上下文setTransform方法执行透视变换（您只能进行平移，缩放，旋转和倾斜）。

但是，根据您的使用情况，您可以伪造它：

http://tulrich.com/geekstuff/canvas/perspective.html http://yuiblog.com/blog/2008/06/23/slicing/

Answer 2

任何仍在疑惑的人，您可以使用http://evanw.github.io/glfx.js/docs/

轻松完成此操作