我希望实现：
http://i53.tinypic.com/2gule04.jpg
我已经尝试了Curving an image that starts as a rectangle (uploaded by user), preferably using Canvas or JS中提到的答案
根据那里的答案，我尝试了像素转换，但没有成功。要了解基于网格的方法，您需要具备我不具备的 3d-2d 开发人员技能。
我是一名 PHP 开发人员，我正在寻找 PHP 或 HTML5 的答案。我尝试了很多东西，从 HTML5 画布到将图像拆分成更小的部分，然后加入它们，但这些似乎不起作用。
我们将不胜感激在正确方向上的帮助。
【问题讨论】：
标签： php javascript html html5-canvas gdlib
如果你可以使用ImageMagick，Circular and Radial Distortion Methods examples 应该非常接近。
我不知道 PHP ImageMagick 扩展（而不是从命令行调用 ImageMagick）是否也支持这一点，但它可能。
【讨论】：
要实现类似的效果，您需要尝试纹理映射，并且需要一些 2d-3d 细分和数学技能。基本上，这个想法是将纹理细分为三角形，并使用变换矩阵将它们映射到 2d 坐标。首先从矩形开始，然后使用你的弯曲形式更简单，但我也是新手，所以我真的不知道是否使用纹理映射来弯曲图像。下面是一个简单的纹理映射示例：Image manipulation and texture mapping using HTML5 Canvas?。
在上述链接中有这个子功能：
n the following code I assume you have a picture object texture and 4 corners each of
which is an object with fields x,y,u,v where x,y are pixel coordinates on the target canvas and u,v are pixel coordinates on texture:
IMO，这些信息足以从纹理映射开始。
【讨论】：
一种可能性是使用旋转动画而不是数学补间。换句话说，您可以使用 5 或 6 个（或任意数量）帧来实现这种转换，这些帧以您想要的帧速率在 HTML5 画布上按顺序绘制。
您可以使用 Canvas 原生 API 轻松绘制每一帧。在您的情况下，您只需要绘制文本，然后绘制一个封闭路径，例如：
ctx.beginPath();
ctx.moveTo(...);
ctx.arc(...);
ctx.lineTo(...);
ctx.arc(...);
ctx.lineTo(...);
ctx.closePath();
只需调整每一帧的对应值。
应该很简单！
【讨论】：