javascript - JavaScript Canvas 上的自由变换矩形

Question

我是 JavaScript canvas 元素的新手。实际上我几个小时前才开始。我正在对图像的矩形部分进行自由变换。 (有关我称之为“自由变换”的示例，请参见:http://www.html5.jp/test/perspective_canvas/demo1_en.html。请注意，我不希望能够允许用户使用此示例功能中的 handle 来变换图像。)

我知道一点如何转换大图像，但我只想转换图像的左半部分(例如)。我怎样才能挑出一个部分并自由变换它？我猜我应该从加载图像开始。我还打赌解决方案将涉及用路径标记左侧。但是 setTransform() 没有给我所需的控制权。我想要一个类似这样的功能:

function freeTransform(canvas, image,
  startX1, startY1, startX2, startY2, startX3, startY3, startX4, startY4,
  endX1, endY1, endX2, endY2, endX3, endY3, endX4, endY4)

但是 Canvas 的上下文没有这个功能(据我所知)。有人会给我一些指导吗？谢谢。

Answer 1

你是对的。

html Canvas 无法使用其常见的 2d 上下文变换矩形的 1 个 Angular 。

您可以使用“三 Angular 测量”在 canvas 2d 中变形图像以赋予它透视图:

http://tulrich.com/geekstuff/canvas/perspective.html

您可以使用 Canvas 的 3d 上下文 (webGL) 更接近透视变换。

您可以使用非平行变换在 webGL 中对图像进行变形以赋予它透视图:

http://games.greggman.com/game/webgl-3d-perspective/