如何使用html5 canvas进行透视图 [英] How to do perspective view with html5 canvas

问题描述

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

I would like to make an image into skewed/perspective/rotated in html5 canvas. The image below is exactly what I would want to do.

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

I have this code to use transformations in canvas but I cant make heads or tails with it. Could someone help me?

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

Also I only want this to be done in HTML5 Canvas not 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 执行透视变换的方法（您只能进行平移，缩放，旋转和倾斜）。

Unfortunately it isn't possible to use the canvas context setTransform method to perform perspective transformations (you are limited to translate, scale, rotate and skew).

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

However, depending on your use-case, you may be able to fake it:

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

这篇关于如何使用html5 canvas进行透视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！