lufylegend:图形变形1
HTML5中的几种变形
HTML5中的变形,共有以下几种方法
scale() 缩放 rotate() 旋转 translate() 平移 transform() 矩阵变形 setTransform() 重设矩阵
这几个方法,对图片一共能完成下面几种处理
但是,如果要实现下面这种不规则的变形,就不行了
那咱们一步步,先来看HTML5的这几个方法。
1,缩放方法如下
- <!DOCTYPE html>
- <html>
- <body>
- <canvas id="myCanvas" width="800" height="280"></canvas>
- <script type="text/javascript">
- var c=document.getElementById('myCanvas');
- var ctx=c.getContext('2d');
- var img = new Image();
- img.src="face.jpg";
- img.onload = function(){
- ctx.drawImage(img,0,0);
- ctx.scale(0.5,0.5);
- ctx.drawImage(img,500,0);
- };
- </script>
- </body>
- </html>
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="280"></canvas>
<script type="text/javascript">
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var img = new Image();
img.src="face.jpg";
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.scale(0.5,0.5);
ctx.drawImage(img,500,0);
};
</script>
</body>
</html>
效果
2,旋转代码
- <!DOCTYPE html>
- <html>
- <body>
- <canvas id="myCanvas" width="800" height="400"></canvas>
- <script type="text/javascript">
- var c=document.getElementById('myCanvas');
- var ctx=c.getContext('2d');
- var img = new Image();
- img.src="face.jpg";
- img.onload = function(){
- ctx.rotate(20*Math.PI/180);
- ctx.drawImage(img,200,0);
- };
- </script>
- </body>
- </html>
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="400"></canvas>
<script type="text/javascript">
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var img = new Image();
img.src="face.jpg";
img.onload = function(){
ctx.rotate(20*Math.PI/180);
ctx.drawImage(img,200,0);
};
</script>
</body>
</html>
3,平移代码
- <!DOCTYPE html>
- <html>
- <body>
- <canvas id="myCanvas" width="800" height="400"></canvas>
- <script type="text/javascript">
- var c=document.getElementById('myCanvas');
- var ctx=c.getContext('2d');
- var img = new Image();
- img.src="face.jpg";
- img.onload = function(){
- ctx.drawImage(img,0,0);
- ctx.translate(100,100);
- ctx.drawImage(img,0,0);
- };
- </script>
- </body>
- </html>
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="400"></canvas>
<script type="text/javascript">
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var img = new Image();
img.src="face.jpg";
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.translate(100,100);
ctx.drawImage(img,0,0);
};
</script>
</body>
</html>
效果
4,倾斜代码
- <!DOCTYPE html>
- <html>
- <body>
- <canvas id="myCanvas" width="800" height="400"></canvas>
- <script type="text/javascript">
- var c=document.getElementById('myCanvas');
- var ctx=c.getContext('2d');
- var img = new Image();
- img.src="face.jpg";
- img.onload = function(){
- ctx.setTransform(1.3,0.1,-0.2,1,80,40);
- ctx.drawImage(img,0,0);
- };
- </script>
- </body>
- </html>
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="400"></canvas>
<script type="text/javascript">
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var img = new Image();
img.src="face.jpg";
img.onload = function(){
ctx.setTransform(1.3,0.1,-0.2,1,80,40);
ctx.drawImage(img,0,0);
};
</script>
</body>
</html>
效果
不规则变形
前面提到,HTML5没办法直接实现不规则变形,但是,可以通过一系列组合来实现不规则变形,比如将下面的这个变形做一下分解
分解后变成
那继续看,它其实可以看做是两个变形的组合,如下图
其实就是将多个变形组合到了一起,这样讲几个变形的其中的一部分拿出来,再拼凑成新的图形,就变成了刚才的特殊图形了
顺着这个思路,我仿照AS3,将一张图分解成多个小的三角形,效果如下
就这样,很轻松的实现了drawtriangles函数,用来扭曲图形,它与AS3的drawtriangles函数功能基本一致,区别就是,第4个之后的参数的含义不同,在这里它第4个参数表示分割线的线粗,第5个参数则表示分割线的颜色,如果不设定,则不显示分割线,这个函数效果如下,你可以实现任何变形,甚至3D变形也可以
这面是测试连接,你可以拖动图中的红点,来让图片发生任意的扭曲变形
lufylegend:图形变形1的更多相关文章
- lufylegend:图形变形3
面来看看drawtriangles函数的扩展.利用drawtriangles函数来实现一个旋转的3D地球,效果如下 因为lufylegend1.5.0版的drawtriangles函数有个bug,所以 ...
- lufylegend:图形变形2
下面来详细讲解一下drawtriangles函数的使用方法.并且使用drawtriangles函数实现下面这种处理效果 因为这个方法是从AS3移植而来,所以它的使用方法和AS3基本一致,这里是AS3的 ...
- [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形
在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...
- WPF学习05:2D绘图 使用Transform进行控件变形
在WPF学习04:2D绘图 使用Shape绘基本图形中,我们了解了如何绘制基本的图形. 这一次,我们进一步,研究如何将图形变形. 例子 一个三角形,经Transform形成组合图形: XAML代码: ...
- OpenGL编程(四)改变窗口大小时保持图形的原形
前面的例子,当我们通过拖拉的方法改变窗口的长宽比例时,窗口里的图形的长宽也相应地伸缩,导致图形变形.如下图: 正如上图所示,当我们把窗口宽度拉长后,图形就会显得比较胖.同样,当我们把窗口的高度拉长后, ...
- iOS总结_UI层自我复习总结
UI层复习笔记 在main文件中,UIApplicationMain函数一共做了三件事 根据第三个参数创建了一个应用程序对象 默认写nil,即创建的是UIApplication类型的对象,此对象看成是 ...
- 用H5中的Canvas等技术制作海报
在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作- ...
- html5 canvas 详细使用教程
转载自 http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝 ...
- CSS3 Transitions, Transforms和Animation的使用
一.前言 CSS3动画相关的几个属性是:transition, transform, animation:分别理解为过渡,变换,动画.虽意义相近,但具体的功能和在CSS3中承担的工作有一定的差异. t ...
随机推荐
- MySQL删除数据后磁盘空间的释放情况【转】
OPTIMIZE TABLE 当您的库中删除了大量的数据后,您可能会发现数据文件尺寸并没有减小.这是因为删除操作后在数据文件中留下碎片所致.OPTIMIZE TABLE 是指对表进行优化.如果已经删除 ...
- django Rest Framework---缓存通过drf-extensions扩展来实现
什么情况下使用缓存 1.不经常更新的数据 2.用户经常访问的一些页面,比如商品列表页.商品详情页等 3.用户经常修改的一些操作:购物车.订单中心等 关于DRF缓存扩展可以参考文档:http://chi ...
- java Set(集合)
set不保存重复的元素(至于如何判断元素相同则较为复杂,后面将会看到).Set中最常被使用的是测试归属表,你可以很容易地询问某个对象是否在某个Set中,正因如此,查找就成了Set最重要的操作,因此通常 ...
- Java 8 lambda表达式示例
例1.用lambda表达式实现Runnable 我开始使用Java 8时,首先做的就是使用lambda表达式替换匿名类,而实现Runnable接口是匿名类的最好示例.看一下Java 8之前的runna ...
- asserts文件存到外部SD卡里
package com.example.wang.testapp3; import android.content.res.AssetManager; import android.graphics. ...
- 【PAT】1020 Tree Traversals (25)(25 分)
1020 Tree Traversals (25)(25 分) Suppose that all the keys in a binary tree are distinct positive int ...
- 修改MySQL中的数据
一:insert语句 1.介绍 在执行插入语句前,需要具有执行INSERT语句的INSERT权限. 2.准备环境 3.简单insert语句 4.插入多行 在这种形式中,每行的值列表用逗号分隔. 如果为 ...
- 如何删除 Win10此电脑 desktop 视频 图片 文档 下载 音乐等文件夹
更改注册表; 1. WIN+R 输入[regedit] 打开注册表管理器 2. 找到路径[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Curren ...
- Java反射初探 ——“当类也学会照镜子”
反射的作用 开门见山地说说反射的作用 1.为我们提供了全面的分析类信息的能力 2.动态加载类 我理解的“反射”的意义 (仅个人理解哈) 我理解的java反射机制就是: 提供一套完善而强大的 ...
- maven打包时包含本地jar
项目中需要使用maven的打包工具,生成zip压缩包,使用的插件是assembly-plugin.因为一些特殊的原因,需要使用一些本地的jar进行依赖,加载外部jar后编码过程中没有任何问题,但是打包 ...