Javascript 如何在html5画布中弯曲/弯曲图像

我有这个

我想这样做

到

HTML

这可以在html5画布中实现吗。如果可能的话，给我看一些方向/例子

---

谢谢

由于拉伸输出需要非仿射变换，因此不可能使用任何本机画布变换。i、 e.它不能简单地通过组合旋转、平移等来实现

理想情况下，您需要定义从扭曲坐标系到原始笛卡尔坐标的公式映射，然后在目标像素空间上迭代，使用上述映射确定该像素所需的颜色

您还需要对相邻像素进行插值，以避免输出看起来“块状”

---

这是非常重要的…

为此，您需要WebGL。你必须拍摄你想要扭曲的图像，将其用作纹理并将其映射到曲面上

是的，这是可能的，但对你的项目来说似乎并不实用

您可以使用透视切片技术：

还可以“伪造”非仿射变换。这通常涉及：

将图像分割为矩形

对角地将这些矩形平分为三角形

扭曲这些三角形以形成所需的失真——失真线框

对于每个三角形：像素将原始图像从未变形三角形插值到变形三角形，以实现扭曲变形

---

-1：在没有任何答案的情况下多次发布同一个问题，甚至更糟，这是一种良好的行为吗？看看这个。它是用一个抛物线方程来求y的位置。

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

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';

});