Lufylegend: Graphics deformation 1

Last Update:2015-04-07 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Several variants in the HTML5

In HTML5, there are several methods

Scale () scaling rotate () rotation translate () translation transform () matrix warp settransform () Reset matrix

These several methods, to the picture can complete the following several processing

However, if you want to achieve the following irregular deformation, it is not

Let's take a step-by-step look at HTML5 's methods first.

1, the scaling method is as follows

[HTML]View Plaincopyprint?

<! DOCTYPE HTML>
<html>
<body>
<canvas id="MyCanvas" width="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>
Effect
2, rotate the code
[HTML]View Plaincopyprint?
 
 
  
  
  <! DOCTYPE HTML>
  
  
  <html> 
  
  
  <body> 
  
  
  <canvas id="MyCanvas" width="height=" ></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>
Effect
3, panning the code
[HTML]View Plaincopyprint?
 
  
  
   
   <! DOCTYPE HTML>
  
   
   <html> 
  
   
   <body> 
  
   
   <canvas id="MyCanvas" width="height=" ></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>
Effect
4, Tilt Code
[HTML]View Plaincopyprint?
 
   
  
    
    <! DOCTYPE HTML>
  
    
    <html> 
  
    
    <body> 
  
    
    <canvas id="MyCanvas" width="height=" ></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>
Effect
Irregular deformation
As mentioned earlier, HTML5 can not directly achieve irregular deformation, however, a series of combinations to achieve irregular deformation, such as the following this deformation decomposition
After decomposition becomes
It can actually be seen as a combination of two variants, such as
In fact, it is the combination of multiple variants together, so that a few of the deformation of the part taken out, and then pieced together into a new shape, it becomes a special figure just now
Along this line of thought, I modeled AS3, a graph into a number of small triangles, the effect is as follows
In this way, it is easy to implement the Drawtriangles function, used to distort the graph, it is basically consistent with the function of AS3 drawtriangles function, the difference is that the meaning of the parameter after the 4th is different, where its 4th parameter represents the line thickness of the split line, The 5th parameter represents the color of the split line, if not set, the split line is not displayed, the function is as follows, you can achieve any distortion, even 3D deformation can also
This is a test connection, you can drag the red dots in the graph to make the image distort arbitrarily
Lufylegend: Graphics deformation 1

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Lufylegend: Graphics deformation 1

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support