HTML5中的几种变形

HTML5中的变形，共有以下几种方法

scale() 缩放 rotate() 旋转 translate() 平移 transform() 矩阵变形 setTransform() 重设矩阵

这几个方法，对图片一共能完成下面几种处理

但是，如果要实现下面这种不规则的变形，就不行了

那咱们一步步，先来看HTML5的这几个方法。

1，缩放方法如下

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" width="800" height="280"></canvas>
  5. <script type="text/javascript">
  6. var c=document.getElementById('myCanvas');
  7. var ctx=c.getContext('2d');
  8. var img = new Image();
  9. img.src="face.jpg";
  10. img.onload = function(){
  11. ctx.drawImage(img,0,0);
  12. ctx.scale(0.5,0.5);
  13. ctx.drawImage(img,500,0);
  14. };
  15. </script>
  16. </body>
  17. </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，旋转代码

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" width="800" height="400"></canvas>
  5. <script type="text/javascript">
  6. var c=document.getElementById('myCanvas');
  7. var ctx=c.getContext('2d');
  8. var img = new Image();
  9. img.src="face.jpg";
  10. img.onload = function(){
  11. ctx.rotate(20*Math.PI/180);
  12. ctx.drawImage(img,200,0);
  13. };
  14. </script>
  15. </body>
  16. </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，平移代码

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" width="800" height="400"></canvas>
  5. <script type="text/javascript">
  6. var c=document.getElementById('myCanvas');
  7. var ctx=c.getContext('2d');
  8. var img = new Image();
  9. img.src="face.jpg";
  10. img.onload = function(){
  11. ctx.drawImage(img,0,0);
  12. ctx.translate(100,100);
  13. ctx.drawImage(img,0,0);
  14. };
  15. </script>
  16. </body>
  17. </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，倾斜代码

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" width="800" height="400"></canvas>
  5. <script type="text/javascript">
  6. var c=document.getElementById('myCanvas');
  7. var ctx=c.getContext('2d');
  8. var img = new Image();
  9. img.src="face.jpg";
  10. img.onload = function(){
  11. ctx.setTransform(1.3,0.1,-0.2,1,80,40);
  12. ctx.drawImage(img,0,0);
  13. };
  14. </script>
  15. </body>
  16. </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的更多相关文章

  1. lufylegend:图形变形3

    面来看看drawtriangles函数的扩展.利用drawtriangles函数来实现一个旋转的3D地球,效果如下 因为lufylegend1.5.0版的drawtriangles函数有个bug,所以 ...

  2. lufylegend:图形变形2

    下面来详细讲解一下drawtriangles函数的使用方法.并且使用drawtriangles函数实现下面这种处理效果 因为这个方法是从AS3移植而来,所以它的使用方法和AS3基本一致,这里是AS3的 ...

  3. [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

    在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...

  4. WPF学习05：2D绘图 使用Transform进行控件变形

    在WPF学习04:2D绘图 使用Shape绘基本图形中,我们了解了如何绘制基本的图形. 这一次,我们进一步,研究如何将图形变形. 例子 一个三角形,经Transform形成组合图形: XAML代码: ...

  5. OpenGL编程（四）改变窗口大小时保持图形的原形

    前面的例子,当我们通过拖拉的方法改变窗口的长宽比例时,窗口里的图形的长宽也相应地伸缩,导致图形变形.如下图: 正如上图所示,当我们把窗口宽度拉长后,图形就会显得比较胖.同样,当我们把窗口的高度拉长后, ...

  6. iOS总结_UI层自我复习总结

    UI层复习笔记 在main文件中,UIApplicationMain函数一共做了三件事 根据第三个参数创建了一个应用程序对象 默认写nil,即创建的是UIApplication类型的对象,此对象看成是 ...

  7. 用H5中的Canvas等技术制作海报

    在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作- ...

  8. html5 canvas 详细使用教程

    转载自 http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝 ...

  9. CSS3 Transitions, Transforms和Animation的使用

    一.前言 CSS3动画相关的几个属性是:transition, transform, animation:分别理解为过渡,变换,动画.虽意义相近,但具体的功能和在CSS3中承担的工作有一定的差异. t ...

随机推荐

  1. Ansible Tower系列 二（安装 Tower）【转】

    文档:http://docs.ansible.com/ansible-tower/ 安装前检查 python版本为2.6 保持网络畅通 内存预留充足 安装用户为root 软件下载 下载地址:http: ...

  2. 公共语言运行库(CLR)开发系列课程(1)：Pinvoke 简介 学习笔记

    前言 让拖管代码对象和非托管对象协同工作的过程称为互用性(Interoperability),通常简称为 Interop. P/Invoke在托管代码与非托管代码交互式时产生一个事务(Transiti ...

  3. JVM(3)对象A和B循环引用，最后会不会不被GC回收？-------关于Java的GC机制

    ①首先说一下,GC里边在JVM其中是使用的ROOT算法,ROOT算法,什么称作为ROOT呢,就是说类的静态成员,静态成员就是static修饰的那种,是"根"的一个,根还包含方法中的 ...

  4. 使用配置文件启动MongoDB

    Ubuntu 16.04 (阿里云ECS),MongoDB 4.0, 原来,已经写了10篇MongoDB的随笔了.可是,自己居然没有使用配置文件启动过MongoDB,对其更多的配置是不明白的. 昨天( ...

  5. 无root或sudo权限，安装mysql

    这其实才是真正的linux,恰当使用权限. 网上找到的中文博客,基本上就那么几篇原创,都要编译源码.但89服务器性能太差编译一次大约半小时无法忍受,在本机上创建了standard用户去尝试几篇博客所言 ...

  6. KnockoutJs学习笔记（十一）

    enable binding往往作用于form elements,比如input.select和textarea等.包含enable binding的DOM元素会依照enable binding参数的 ...

  7. JS文件上传神器bootstrap fileinput详解

    Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...

  8. Java编程的逻辑 (55) - 容器类总结

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  9. 《MySQL技术内幕 InnoDB存储引擎 》学习笔记

    第1章  MySQL体系结构和存储引擎 1.3 MySQL存储引擎 数据库和文件系统最大的区别在于:数据库是支持事务的 InnoDB存储引擎: MySQL5.5.8之后默认的存储引擎,主要面向OLTP ...

  10. Vue.js项目集成ElementUI

    Vuejs实例-02Vue.js项目集成ElementUI   Vuejs实例-02Vue.js项目集成ElementUI 0:前言 vue.js的UI组件库,在git上有多个项目,我见的使用者比较多 ...