html - 如何用html5 canvas做透视图

Question

我想在 html5 Canvas 中使图像倾斜/透视/旋转。下图正是我想要做的。

我有这段代码可以在 Canvas 中使用转换，但我无法用它做出正面或反面。有人可以帮助我吗？

此外，我只想在 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

遗憾的是，无法使用 Canvas 上下文 setTransform 方法执行透视变换(您只能平移、缩放、旋转和倾斜)。

但是，根据您的用例，您可以伪造它:

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