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

最新推荐文章于 2024-09-12 19:55:46 发布

T客开发

最新推荐文章于 2024-09-12 19:55:46 发布

阅读量1.6k

点赞数 1

分类专栏：专业知识文章标签： HTML5 css Firefox OS 测试 canvas

本文链接：https://blog.csdn.net/u013919449/article/details/41082849

版权

本文介绍了HTML5中用于图形变形的方法，包括scale()、rotate()、translate()和transform()，并通过实例展示了如何使用这些方法进行图像的缩放、旋转和平移。虽然无法直接实现不规则变形，但通过组合变形可以模拟实现。文章还提到了一种仿AS3的drawtriangles函数，用于创建复杂的扭曲效果，支持3D变形，并提供了交互式的测试链接。

摘要由CSDN通过智能技术生成

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

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

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

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

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

1，缩放方法如下

[html]view plaincopy 
   
 <!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);  