HTML5高级编程之图形扭曲及其应用一(原理篇)
来源:互联网 发布:ppsspp 源码 编辑:程序博客网 时间:2024/05/17 05:56
转自:http://blog.csdn.net/lufy_legend/article/details/8084367
HTML5中的变形,共有以下几种方法
scale() 缩放
rotate() 旋转
translate() 平移
transform() 矩阵变形
setTransform() 重设矩阵
这几个方法,对图片一共能完成下面几种处理
但是,如果要实现下面这种不规则的变形,就不行了
那咱们一步步,先来看HTML5的这几个方法。
1,缩放方法如下
效果
2,旋转代码
效果
4,倾斜代码
效果
不规则变形
前面提到,HTML5没办法直接实现不规则变形,但是,可以通过一系列组合来实现不规则变形,比如将下面的这个变形做一下分解
分解后变成
那继续看,它其实可以看做是两个变形的组合,如下图
其实就是将多个变形组合到了一起,这样讲几个变形的其中的一部分拿出来,再拼凑成新的图形,就变成了刚才的特殊图形了
顺着这个思路,我仿照AS3,将一张图分解成多个小的三角形,效果如下
就这样,很轻松的实现了drawtriangles函数,用来扭曲图形,它与AS3的drawtriangles函数功能基本一致,区别就是,第4个之后的参数的含义不同,在这里它第4个参数表示分割线的线粗,第5个参数则表示分割线的颜色,如果不设定,则不显示分割线,这个函数效果如下,你可以实现任何变形,甚至3D变形也可以
这面是测试连接,你可以拖动图中的红点,来让图片发生任意的扭曲变形
http://lufy.netne.net/lufylegend-js/lufylegend-1.4/beginBitmapFill/sample01.html
使用这个drawtriangles函数,你需要下载HTML5开源引擎lufylegend的1.5版或以上版本,lufylegend1.5版发布地址如下
http://blog.csdn.net/lufy_legend/article/details/8054658
关于drawtriangles函数的详细应用,以及如何利用它来实现3D图形的绘制,下次咱们再来细细讲解,欢迎继续关注我的博客
http://blog.csdn.net/lufy_legend
- HTML5高级编程之图形扭曲及其应用一(原理篇)
- HTML5高级编程之图形扭曲及其应用一(原理篇)
- HTML5高级编程之图形扭曲及其应用一(原理篇)
- HTML5高级编程之图形扭曲及其应用一(原理篇)
- HTML5高级编程之图形扭曲及其应用三
- HTML5高级编程之图形扭曲及其应用二(运用篇)
- HTML5高级编程之图形扭曲及其应用二(运用篇)
- HTML5高级编程之图形扭曲及其应用三(扩展篇)
- HTML5高级编程之图形扭曲及其应用二(运用篇)
- HTML5高级编程之图形扭曲
- HTML5高级编程之像素
- Symbian OS应用编程图形篇之窗体
- Symbian OS应用编程图形篇之动画(1)
- Symbian OS应用编程图形篇之动画(2)
- Symbian OS应用编程图形篇之字体(1)
- Symbian OS应用编程图形篇之字体(2)
- Symbian OS应用编程图形篇之事件(Event)
- Symbian OS应用编程图形篇之架构
- C语言实验——圆周率
- ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据
- Ubuntu17.10下安装和编译caffe问题总结
- 适配iPhonex的头部安全区域 Masonry 的适配安全区域
- 自定义水平ProgressBar
- HTML5高级编程之图形扭曲及其应用一(原理篇)
- 【MQ】ActiveMQ(三)——spring管理ActiveMQ,实现发送和接收效果
- 百度:2017茶行业大数据
- mongdb新版本建用户与删除用户
- 用CONSTRUCT 2制作游戏心得。
- 中国癌症大数据报告深度分析
- 开源异常管理平台JCatch
- 微信小程序获取当前时间
- 上传图片响应结果自定义封装