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

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

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

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



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


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

1,缩放方法如下

[html]  view plain copy
  1. >  
  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>  

效果

2,旋转代码

[html]  view plain copy
  1. >  
  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>  

效果

3,平移代码

[html]  view plain copy
  1. >  
  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>  

效果


4,倾斜代码

[html]  view plain copy
  1. >  
  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>  


效果


不规则变形

前面提到,HTML5没办法直接实现不规则变形,但是,可以通过一系列组合来实现不规则变形,比如将下面的这个变形做一下分解


分解后变成


那继续看,它其实可以看做是两个变形的组合,如下图


其实就是将多个变形组合到了一起,这样讲几个变形的其中的一部分拿出来,再拼凑成新的图形,就变成了刚才的特殊图形了

顺着这个思路,我仿照AS3,将一张图分解成多个小的三角形,效果如下


就这样,很轻松的实现了drawtriangles函数,用来扭曲图形,它与AS3的drawtriangles函数功能基本一致,区别就是,第4个之后的参数的含义不同,在这里它第4个参数表示分割线的线粗,第5个参数则表示分割线的颜色,如果不设定,则不显示分割线,这个函数效果如下,你可以实现任何变形,甚至3D变形也可以


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

你可能感兴趣的:(专业知识,HTML5,css,Firefox,OS,测试,canvas)