JavaScript Canvas上的自由变换矩形

Question

我是JavaScript canvas元素的新手。我实际上刚刚开始几个小时前。我正在研究图像矩形截面的自由变换。 （有关我称之为“自由变换”的示例，请参阅：http://www.html5.jp/test/perspective_canvas/demo1_en.html。请注意，我不希望允许用户使用句柄转换图像，如此示例所示。）

我知道如何变换大图像，但我只想变换图像的左半部分（例如）。我如何挑出一个部分并自由变换呢？我猜我应该从加载图像开始。我还打赌解决方案将涉及用路径标记左侧。但是setTransform（）没有给我我需要的控件。我想有一个类似的功能：

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

但是画布的上下文没有这个功能（据我所知）。有人会给我一些方向吗？谢谢。

Answer 1

你是对的。

html画布无法使用常见的2d上下文转换矩形的1个角。

您可以使用“三角测量”来使画布2d中的图像变形以提供透视：

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

您可以使用canvas的3d上下文（webGL）更接近透视变换。

您可以使用非平行变换来变换webGL中的图像，从而为其提供透视：

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