HTML5高级编程之图形扭曲及其应用.docx

HTML5高级编程之图形扭曲及其应用作者：lufyHTML5中的几种变形HTML5中的变形，共有以下几种方法scale() 缩放rotate() 旋转translate() 平移transform() 矩阵变形setTransform() 重设矩阵这几个方法，对图片一共能完成下面几种处理但是，如果要实现下面这种不规则的变形，就不行了那咱们一步步，先来看HTML5的这几个方法。1，缩放方法如下htmlview plaincopy1. 2. 3. 4. 5. 6. varc=document.getElementById(myCanvas);7. varctx=c.getContext(2d);8. varimg=newImage();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. 16. 17. 效果2，旋转代码htmlview plaincopy1. 2. 3. 4. 5. 6. varc=document.getElementById(myCanvas);7. varctx=c.getContext(2d);8. varimg=newImage();9. img.src=face.jpg;10. img.onload=function()11. ctx.rotate(20*Math.PI/180);12. ctx.drawImage(img,200,0);13. ;14. 15. 16. 效果3，平移代码htmlview plaincopy1. 2. 3. 4. 5. 6. varc=document.getElementById(myCanvas);7. varctx=c.getContext(2d);8. varimg=newImage();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. 16. 17. 效果4，倾斜代码htmlview plaincopy1. 2. 3. 4. 5. 6. varc=document.getElementById(myCanvas);7. varctx=c.getContext(2d);8. varimg=newImage();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. 15. 16. 效果不规则变形前面提到，HTML5没办法直接实现不规则变形，但是，可以通过一系列组合来实现不规则变形，比如将下面的这个变形做一下分解分解后变成那继续看，它其实可以看做是两个变形的组合，如下图其实就是将多个变形组合到了一起，这样讲几个变形的其中的一部分拿出来，再拼凑成新的图形，就变成了刚才的特殊图形了顺着这个思路，我仿照AS3，将一张图分解成多个小的三角形，效果如下就这样，很轻松的实现了drawtriangles函数，用来扭曲图形，它与AS3的drawtriangles函数功能基本一致，区别就是，第4个之后的参数的含义不同，在这里它第4个参数表示分割线的线粗，第5个参数则表示分割线的颜色，如果不设定，则不显示分割线，这个函数效果如