javascript - 如何在 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';

});

这是我的 JSFiddler 更新的 JSFiddler

这可以在 html5 画布中完成吗？如果可能的话，然后告诉我一些方向/例子。

谢谢

Answer 1

无法使用任何本机 Canvas 转换，因为您的拉伸输出需要非仿射转换。即它不能简单地通过组合旋转、平移等来实现。

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

您还需要插入相邻像素以避免输出看起来“块状”。

这是不平凡的...

Answer 2

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

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

http://www.subshel​​l.com/en/subshel​​l/blog/image-manipulation-html5-canvas102.html

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

1. 将您的图像划分为矩形，
2. 对角线将这些矩形平分为三角形。
3. 扭曲这些三角形以形成所需的扭曲 - 扭曲线框。
4. 对于每个三角形：将原始图像从未失真的三角形像素插值到失真的三角形中，以实现翘曲失真。

Answer 3

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