[来自：]http://www.alloyteam.com/2012/08/texture-mapping-on-context2d/
我们在做一些图像变换或者3D建模时，骨架或者网格的“蒙皮”是少不了的。
在webGL中，也就是“experimental-webgl”的context中，webGL跟openGL一样，提供了一个非常方便的
|
1
|
gl.bindTexture |
接口，可以很容易的对某一个指定的面或者网格蒙上指定的素材。并且，被蒙皮的区域做矢量变换，3d rotate之类的，texture会自动随着变换。不用额外的做处理。所以在webGL中，textureMapping是十分容易和方便的。
这里有个简单的demo，支持webGL的浏览器可以尝试围观下。
当然，从文章的标题可以看出，我们今天要讨论的内容并不是webGL下的bindTexture。而是在2D的context下怎么对素材进行TextureMapping？
【Texture Mapping】
其实只要对canvas 2d context 的api有一定了解，找来找去就会发现，唯一能让图片变形的api应该只有
|
1
|
CanvasRenderingContext2D.transform |
了，但是实际上，仅仅折腾这个api，参数改来改去试来试去会发现transform只能完成平行四边形的变换。如下demo：
假如我想要做到不规则四边形的texture变换，就需要重新考虑一条路子。比如下面这个例子：
ok，看起来基本已经达到目的了。可以适应任意不规则四边形的变换。
那么是怎么实现的呢？
【实现】
从上面那个演示demo应该就可以看出来了，还是利用“三角拼凑法”来实现。三角切分法有个维度，切分的越细，得到最终的模拟的结果会越逼真。相应的计算量也会越大。
假设我们切分的阀值为n，那么代表把每条边先n等分，然后n*n个四边形格子，然后每个格子再沿对角一分为二，这样得到n*n*2个三角形，每个三角形都可以根据它所在的四边形格子进行transfrom的变换，最终拼接起来得到近似的结果。
具体的实现和demo都可以从这里获取：
https://github.com/hongru/TextureMapping
【扩展】
说了这么多，那么这样的功能在什么地方能用起来呢？更多的情景是在一些2D模拟3D场景并且需要texture做支撑的时候。
于是，我们在Context 2D中也可以做到图片的3D翻转变换了。当然，如果只是图片的翻转的话，css3的transform-3d也可以做到，我们这里只讨论canvas中context 2d中的实现。
当然，继续下去，完成一个图片展示的应用也未尝不可，并不需要webGL。如下一个简单的Demo
