javascript - 如何在 html5 Canvas 中弯曲/弯曲图像

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 canvas 中可以做到吗？如果可能的话，给我一些指导/例子。

谢谢

Answer 1

不可能使用任何 native Canvas 转换，因为拉伸(stretch)输出需要非仿射 转换。也就是说，它不能简单地通过结合旋转、平移等来实现。

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

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

这很重要......