我想在 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);
【问题讨论】：
很遗憾，无法使用画布上下文setTransform 方法执行透视变换（您只能平移、缩放、旋转和倾斜）。
但是，根据您的用例，您可以伪造它：
http://tulrich.com/geekstuff/canvas/perspective.html http://yuiblog.com/blog/2008/06/23/slicing/
【讨论】：
3D projection 并且很普遍（谷歌搜索），但很难在答案中解释（我也很难理解）en.wikipedia.org/wiki/3D_projection
context.transform 来伪造它。所以可以通过setTransform或者transform，你只需要先计算一下。
setTransform 或 transform 属性 (context.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY)) 进行仿射变换，这意味着平行线在变换后将保持平行（该属性不是t 通常适用于透视变换）。透视变换需要 Canvas 不支持的矩阵中的更多元素（额外的行/列）（请参阅：goo.gl/KRRwbb）。
transform。在 phoria-renderer.js 第 618 行 fRenderTriangle 函数中。其中使用context.tansform 和context.drawImage
任何还在疑惑的人，您可以使用http://evanw.github.io/glfx.js/docs/轻松做到这一点
【讨论】：