如何彎曲/曲線HTML5畫布圖像

Question

我有這個

我想這樣做

到

HTML

<canvas id="mycanvas"></canvas> 

JS

var temp_can1, temp_can1_ctx; 
$(document).ready(function() { 
temp_can1 = document.getElementById('mycanvas'); 
temp_can1_ctx = temp_can1.getContext('2d'); 
var imageObj_rotator3 = new Image(); 

imageObj_rotator3.onload = function() { 

    temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0); 
    temp_can1_ctx.globalCompositeOperation = "source-atop"; 
    var pattern = temp_can1_ctx.createPattern(imageObj_rotator3, 'no-repeat'); 
    temp_can1_ctx.rect(0, 0, temp_can1.width, temp_can1.height); 
    temp_can1_ctx.fillStyle = pattern; 
    temp_can1_ctx.fill(); 
    temp_can1_ctx.globalAlpha = 0.10; 
    temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0); 
    temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0); 
    temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0); 

}; 
imageObj_rotator3.src = 'http://i.stack.imgur.com/o8EJp.png'; 

}); 

Here is my JSFiddler Updated JSFiddler

這可能在HTML5畫布做。如果可能的話給我看一些方向/示例。

謝謝

Answer 1

它使用任何天然畫布轉換爲你的伸展後的輸出需要，非親轉換是不可能的。即它不能簡單地通過結合旋轉，平移等來實現。

理想情況下，您需要定義一個公式映射到扭曲座標系中的原始笛卡爾座標，然後遍歷目標像素空間，使用上述映射確定該像素所需的顏色。

您還需要插入相鄰像素以避免輸出看起來「塊狀」。

這是不平凡的...

Answer 2

爲此，您需要WebGL。您必須拍攝想要變形的圖像，將其用作紋理並將其映射到曲面上。

Answer 3

是的，這是可能的，但它對於您的項目似乎並不實際。

可以使用透視分割技術：

http://www.subshell.com/en/subshell/blog/image-manipulation-html5-canvas102.html

你也可以「假」非仿射變換。這通常涉及：

1. 分割圖像劃分爲矩形，
2. 對角平分這些矩形成三角形。
3. 翹曲這些三角形以形成所需的變形 - 一個變形線框。
4. 對於每個三角形：將原始圖像從未失真的三角形像素插值到扭曲的三角形中以實現扭曲變形。