首页

web前端

H5教程

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

黄舟

Mar 02, 2017 pm 01:34 PM

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(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
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(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
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(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
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(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
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变形也可以

这面是测试连接，你可以拖动图中的红点，来让图片发生任意的扭曲变形

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

以上就是HTML5高级编程之图形扭曲及其应用一(原理篇)的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

H5：网络内容和设计的未来May 01, 2025 am 12:12 AM

H5（HTML5）将通过新元素和API提升网页内容和设计。1）H5增强了语义化标记和多媒体支持。2）它引入了Canvas和SVG，丰富了网页设计。3）H5的工作原理是通过新标签和API扩展HTML功能。4）基本用法包括使用创建图形，高级用法涉及WebStorageAPI。5）开发者需注意浏览器兼容性和性能优化。

H5：网络开发的新功能和功能Apr 29, 2025 am 12:07 AM

H5带来了多项新功能和能力，极大提升了网页的互动性和开发效率。1.语义化标签如、增强了SEO。2.多媒体支持通过和标签简化了音视频播放。3.Canvas绘图提供了动态图形绘制工具。4.本地存储通过localStorage和sessionStorage简化了数据存储。5.地理位置API便于开发基于位置的服务。

H5：HTML5的关键改进Apr 28, 2025 am 12:26 AM

HTML5带来了五个关键改进：1.语义化标签提升了代码清晰度和SEO效果；2.多媒体支持简化了视频和音频嵌入；3.表单增强简化了验证；4.离线与本地存储提高了用户体验；5.画布与图形功能增强了网页的可视化效果。

HTML5：标准及其对Web开发的影响Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括语义化标签、多媒体支持、离线存储与本地存储、表单增强。1.语义化标签如、等，提升代码可读性和SEO效果。2.和标签简化多媒体嵌入。3.离线存储和本地存储如ApplicationCache和LocalStorage，支持无网络运行和数据存储。4.表单增强引入新输入类型和验证属性，简化处理和验证。