JavaScript帆布上的自由變換矩形

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 canvas不能使用其公共2d上下文來轉換矩形的1個角。

您可以使用「三角」變形在畫布2D圖像給它透視：

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

你可以得到更接近的角度使用Canvas的3D環境（WebGL的）轉換。

可以使用非平行變換在WebGL的變形的圖像給它透視：

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