1

我是 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)

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

4

1 回答 1

2

你是对的。

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

您可以使用“三角测量”对画布 2d 中的图像进行变形以使其具有透视性：

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

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

您可以使用非并行变换在 webGL 中对图像进行变形以赋予其透视效果：

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

于 2013-06-25T19:10:27.643 回答