HTML5高级编程之图形扭曲及其应用二(运用篇)
上次介绍了在html5中实现图片扭曲效果的原理，并扩展成了drawtriangles函数，
下面是上文连接
HTML5高级编程之图形扭曲及其应用一(原理篇)
http://blog.csdn.net/lufy_legend/article/details/8084367
下面来详细讲解一下drawtriangles函数的使用方法。并且使用drawtriangles函数实现下面这种处理效果
因为这个方法是从AS3移植而来，所以它的使用方法和AS3基本一致，这里是AS3的drawtriangles函数API，大家可以参照一下
http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/flash/display/Graphics.html#drawTriangles()
上次也说明过，移植后的drawtriangles函数，第4个之后的参数的含义不同，在这里它第4个参数表示分割线的线粗，第5个参数则表示分割线的颜色，如果不设定，则不显示分割线
drawTriangles函数的定义
可以看到，上图中显示了三角形的边框。
好了，接下来说说其他三个参数的用法，
1，第一个参数vertices，其实就是定义每个顶点的坐标，这几个顶点的顺序依次为下图
vertices参数中储存的就是上面的9个顶点的坐标，代码如下
对应图中的三角形，代码如下
换算成代码如下
上面的变形是将图片分割成了8个三角形，要实现更多种变形，那只需要将图片分割成更多的小三角形就可以了
比如我利用这个函数，制作了一个简陋的图片修饰工具，效果如下
大家可以点击下面的连接，来测试一下它的效果
http://lufylegend.com/html5/lufylegend/ps.html
转载请注明：转自lufy_legend的博客
备注：
使用drawtriangles函数，你需要下载HTML5开源引擎lufylegend的1.5版或以上版本，lufylegend1.5版发布地址如下
http://blog.csdn.net/lufy_legend/article/details/8054658
drawtriangles函数可以实现多种效果，3D效果也可以轻松实现，比如我们常见的翻书效果，还有3D地球旋转，这些在下次再继续介绍，欢迎继续关注我的博客
http://blog.csdn.net/lufy_legend
