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

How to bend/curve a image in html5 canvas(如何在 html5 画布中弯曲/弯曲图像)

问题描述

我有这个

我想这样做

到

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 画布中实现吗?如果可能的话，请告诉我一些方向/示例.

is this possible to do in html5 canvas. if possible then show me some direction/example.

谢谢

推荐答案

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

It's not possible using any native Canvas transformations as your stretched output requires non-affine transformations. i.e. it cannot be achieved simply by combining rotations, translations, etc.

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

Ideally you need to define a formula mapping to the original cartesian coordinates from the distorted coordinate system and then iterate over the destination pixel space, using the above mapping to determine the required colour for that pixel.

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

You would also need to interpolate neighbouring pixels to avoid the output looking "blocky".

这很重要……

这篇关于如何在 html5 画布中弯曲/弯曲图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！