如何弯曲/曲线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. 对于每个三角形：将原始图像从未失真的三角形像素插值到扭曲的三角形中以实现扭曲变形。