如何使用HTML5画布实现透视视图

Question

我希望能在HTML5画布中将图像倾斜/透视/旋转。以下图片是我想要实现的效果。 我有这段代码可以在画布中使用变换，但我无法理解它。有人可以帮助我吗？

另外，我只想在HTML5画布中完成，而不是使用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);

- Zakukashi

---

正如答案所述，使用上下文转换无法进行透视。使用CSS有什么问题？ - Alex Fainshtein

Answer 1

如果您仍然有疑问，您可以轻松地使用http://evanw.github.io/glfx.js/docs/来完成此操作。

- Younes Nj

---

有使用glfx.js实现它的示例吗？ - aloisdg

@aloisdg 这里有一个例子 http://evanw.github.io/glfx.js/demo/#perspective - nncl

Answer 2

很抱歉，使用画布上下文的setTransform方法执行透视转换是不可能的（您只能使用平移、缩放、旋转和倾斜）。但是，根据您的用例，您可能可以模拟它： http://tulrich.com/geekstuff/canvas/perspective.html http://yuiblog.com/blog/2008/06/23/slicing/。

- WebSeed

---

这是可能的，只是非常复杂。数学上涉及到“三维投影”，并且已经被广泛应用（可以在谷歌上搜索），但是在一个答案中解释起来太困难了（对我来说也太难理解了）。http://en.wikipedia.org/wiki/3D_projection - Lex

@Lex - 请认真阅读我的回答。您不能使用画布上下文的setTransform来执行透视变换。我理解透视的工作原理（我一直在编写3D JS库https://github.com/WebSeed/PolygonJS）。 - WebSeed

JS库做得不错。我一直在尝试进行一些JS转换。但我觉得答案有点误导人，难道你不会使用context.transform来模拟它吗？所以通过setTransform或transform是可能的，你只需要先计算好。 - Lex

@Lex - HTML5 Canvas只允许通过setTransform或transform属性（context.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY)）进行仿射变换，这意味着平行线在变换后仍将保持平行（这通常不适用于透视变换）。透视变换需要矩阵中更多的元素（额外的行/列），Canvas不支持这种变换（参见：http://goo.gl/KRRwbb）。 - WebSeed

对不起，如果我错了，我正在查阅phoriajs代码（有点超出我的能力范围），看起来Kevin Roast在将纹理映射到网格上的方式是使用transform。在phoria-renderer.js的第618行的fRenderTriangle函数中使用context.transform和context.drawImage。 - Lex