在JavaScript画布上自由变换矩形

Question

我是JavaScript画布元素的新手。实际上我几个小时前才开始。我正在做一个图像矩形部分的自由变换。(有关我所说的“自由转换”的示例，请参阅以下内容：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/