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 ...

随机推荐

linux动态追踪神器——Strace实例介绍【转】
Strace是Linux下一款通用的进程动态跟踪工具,用来追踪程序执行时的系统调用和所接收的信号.其应用方法如下图(部分). 首先,简单说说它的使用参数,Strace的参数包括输出参数.过滤参数.统计 ...
.NET 的 WCF 和 WebService 有什么区别?(转载)
[0]问题: WCF与 Web Service的区别是什么? 和ASP.NET Web Service有什么关系? WCF与ASP.NET Web Service的区别是什么? 这是很多.NET开发人 ...
在SharePoint 2013里配置Excel Services
配置步骤,请参看下面两篇文章 http://www.cnblogs.com/jianyus/p/3326304.html https://technet.microsoft.com/zh-cn/lib ...
Python_oldboy_常用模块（九）
本节大纲: 模块介绍 time &datetime模块 random os sys shutil json & pickle shelve xml处理 yaml处理 configpar ...
sonarLint--强大的代码审查工具（插件）
idea也有的一个插件贴上一个eclipse的sonarlint用法 http://blog.csdn.net/limm33/article/details/51166840 不过听说从2015年1 ...
ConvertUtils.register的作用
BeanUtils的populate方法或者getProperty,setProperty方法其实都会调用convert进行转换但Converter只支持一些基本的类型,甚至连Java.util.D ...
1 、在Linux（centos6.8）系统下的JDK安装与配置
一.解压jdk安装包: 附上jdk1.8的下载地址: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-21 ...
bzoj 1179
题意:给你一个有向图,每个点有一个权值,有一个起点和q个终点,没经过一个点加上这个点的权值,让你选一条路,问你最大值是多少. 思路:tarjan强连通缩个点, 然后在拓扑图上dp一下就好啦, 注意第二 ...
戏说 Spring MVC 框架
Spring MVC 是 Spring 框架的一部分,和 Struts 一样都是属于 web 层框架,根据项目分层的思想,一个项目基本可以分为持久层,业务层和 web 层.而 Spring MVC 主 ...
循序渐进学.Net Core Web Api开发系列【12】：缓存
系列目录循序渐进学.Net Core Web Api开发系列目录本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述本篇介绍如 ...

lufylegend:图形变形1

HTML5中的几种变形

不规则变形

lufylegend:图形变形1的更多相关文章

随机推荐

热门专题