HTML5高级编程之图形扭曲及其施用二(运用篇)

HTML5高级编程之图形扭曲及其应用二(运用篇)

上次介绍了在html5中实现图片扭曲效果的原理，并扩展成了drawtriangles函数，

下面是上文连接

HTML5高级编程之图形扭曲及其应用一(原理篇)

http://blog.csdn.net/lufy_legend/article/details/8084367

下面来详细讲解一下drawtriangles函数的使用方法。并且使用drawtriangles函数实现下面这种处理效果

HTML5高级编程之图形扭曲及其施用二(运用篇)

因为这个方法是从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，其实就是定义每个顶点的坐标，这几个顶点的顺序依次为下图

HTML5高级编程之图形扭曲及其施用二(运用篇)

vertices参数中储存的就是上面的9个顶点的坐标，代码如下

对应图中的三角形，代码如下

换算成代码如下

上面的变形是将图片分割成了8个三角形，要实现更多种变形，那只需要将图片分割成更多的小三角形就可以了

比如我利用这个函数，制作了一个简陋的图片修饰工具，效果如下

HTML5高级编程之图形扭曲及其施用二(运用篇)

大家可以点击下面的连接，来测试一下它的效果

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