Html5-canvas Introduction (vi)

Already the sixth chapter, and almost the end, if you from the first chapter of patient follow to the end of this chapter, then you can master the most of the canvas knowledge points (of course, if you want to master, still have to rely on practice, do some small cases).

Also hope that everyone in the study of this series can be handy to the article "like", is a kind of support for me.

What we are going to learn today is the transformation method of canvas.

Scaling method Scale ()

In the canvas, if we need to scale the current drawing object, we can do so with the scales (), whose syntax is

Ctx.scale ( s_width, S_height );

S_width and s_height represent the magnification of the width or height to be scaled, noting that the values of these two parameters are no longer pixel values but are scaled multiples, such as 1 for non-scaling, 0.5 for 50%, and 2.3 for magnification 2.3 times times. Let's take an example:

<CanvasID= "MyCanvas"width= "The "Height= " the"style= "Border:solid 1px #CCC;">your browser does not support canvas, it is recommended to use the latest version of Chrome</Canvas><Script>varC=document.getElementById ("MyCanvas");varCTX=C.getcontext ("2d");varimg= NewImage (); IMG.SRC= "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg"; Img.onload= function() {Ctx.globalalpha= 0.3; //Set Global Transparencyctx.drawimage (IMG,0,0); Ctx.scale (1.2,1.2); Ctx.drawimage (IMG,0,0); Ctx.scale (1.2,1.2); Ctx.drawimage (IMG,0,0); }</Script>

Note that we are using CTX here. The Globalalpha property, which represents global transparency, has a value of 0-1, 1 is opaque, and 0 is completely transparent. Our code above sets global transparency to 0.3, which means that any subsequent drawn object has only 30% transparency. The effect is as follows:

One thing to note is that when the canvas is scaling the current drawing object, its zoom center point is the coordinate origin of the canvas (0,0). Not only the scaling, but the other variants we are going to introduce are all based on the canvas (0,0) coordinate point as the center point of the transformation.

We can look at this example:

var c = document.getElementById ("MyCanvas"), var ctx = C.getcontext ("2d"), var img = new Image (); img.src = "http://images.cn Blogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg "; img.onload = function () {    ctx.globalalpha = 0.5;     Ctx.drawimage (img,10,10);     Ctx.scale (2,2);    Ctx.drawimage (img,10,10); }

As you can see, the distance from the upper-left corner of the canvas is twice times the distance from the first image because it is scaled twice times the origin of the upper left corner of the canvas.

In other words, the distance parameter in the second Ctx.drawimage (IMG,10,10) is also magnified, and the coordinates that actually begin to draw on the canvas become (10*2, 10*2), i.e. (20,20).

Rotation method rotate ()

We can rotate the current drawing object through the Rotate () method, which has only one parameter:

Ctx.rotate (angle);

Parameter angle refers to the degree to be rotated, remember we mentioned in the third chapter, the degree to use Math.PI as the benchmark, you can put a math.pi to understand 180 degrees, as follows we have to rotate a picture 30 degrees (1/6*MATH.PI):

var c = document.getElementById ("MyCanvas"); var ctx = C.getcontext ("2d"); var New  = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg"function() {     = 0.5;     Ctx.drawimage (IMG,10,10);     Ctx.rotate (1/6*math.pi);    Ctx.drawimage (img,10,10);}

So the picture will be rotated 30 degrees clockwise relative to the top left corner of the canvas, and if you want to rotate counterclockwise, you can set the degrees to negative values, such as ctx.rotate ( -1/6*MATH.PI);

Displacement method translate ()

After drawing an object on the canvas, we can shift the canvas coordinates relative to the x-axis or y-axis by using the translate () method. Its syntax is:

Ctx.translate ( t_x, t_y );

T_x represents the amount of displacement in the x-axis direction, and t_y represents the amount of displacement in the y-axis direction. Let's take an example:

var c = document.getElementById ("MyCanvas"); var ctx = C.getcontext ("2d"); var New  = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg"function() {     = 0.5;     Ctx.drawimage (IMG,10,60);      = 1;     Ctx.translate (50,-30);  // make a 50px right shift in the x-axis direction and do 30px upward displacement    in the y-axis direction Ctx.drawimage (img,10,60);}

As you can see, the newly drawn object (opaque picture) is offset 50px and -30px in the x-axis, y-axis direction relative to the first picture (translucent).

However, when we introduce translate (), it means that the method is the displacement of the coordinate of the canvas relative to the x-axis or y-axis, how is this understood?

The above code, two times DrawImage, its start to draw coordinates are (10,60), we first try to modify, the second drawing code changed to Ctx.drawimage (img,30,30):

var c = document.getElementById ("MyCanvas"); var ctx = C.getcontext ("2d"); var New  = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg"function() {     = 0.5;     Ctx.drawimage (IMG,10,60);      = 1;     Ctx.translate (50,-30);     Ctx.drawimage (IMG,// Modify parameters so that the coordinates starting to draw are different from the above }

The effect is as follows:

So the understanding of this effect, we can think of as "the coordinate system of the canvas " in the x-axis, the y-axis, respectively, offset 50px and -30px. To deepen the understanding of the analysis diagram:

Deformation method transform ()

If you are a transformer (Transformers) enthusiast, then you are naturally familiar with the word transform.

In canvas, we can deform the matrix of the current drawing object. Let's take a look at the effect of the Twist tool, a utility in Adobe Fireworks:

and transform () is to achieve this in the horizontal or vertical direction of the scale, tilt, offset effect. Corresponding to these effects, it has six parameters:

Ctx.transform (A,B,C,D,E,F);

The parameters have the following meanings:

At first glance this parameter seems to be very confusing, but it is not, it is in accordance with the mathematical matrix formula rules (click here to see details):

where x and y are the initial coordinates of the element, X ' and Y ' are transformed by the matrix to obtain the new coordinates. The new coordinates can be obtained by applying a transform to the original coordinates through a 3x3 transformation matrix.

Let's take an example to reduce the picture by a factor of 45 degrees and tilt the vertical offset of 50px in the original position:

<canvas id= "MyCanvas" width= "260" height= "" style= "Border:solid 1px #CCC;" >your browser does not support canvas, it is recommended to use the latest version of Chrome</canvas><script>varc = document.getElementById ("MyCanvas");varCTX = C.getcontext ("2d");varIMG =NewImage (); IMG.SRC= "Http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg"; Img.onload=function() {Ctx.globalalpha= 0.5; Ctx.drawimage (IMG,0,0); Ctx.globalalpha= 1; Ctx.transform (0.5,1,0,0.5,0,50);//deformationCtx.drawimage (img,0,0);}</script>

Note that the "Horizontal tilt 45 degrees" Here, we assign a value of 1 to parameter B, not an angle value such as Math.PI.

In CSS 3,Transform:skew (θx,θy) is equivalent to Transform:matrix (Tan (θx), 0,0,tan (θy), 0,0) , and transform () The tilt parameter is also the equivalent of tan (tilt angle) calculated value, due to tan (45°) =1, so we assign a value to the parameter B to achieve a horizontal tilt 45 degrees effect.

The last thing to introduce is the SetTransform () method, which has the same parameters as the transform () and implements the same method, but the SetTransform () resets all previously set deformation values.

How do you understand the difference between transform () and SetTransform ()? Let's look at an example:

varc = document.getElementById ("MyCanvas");varCTX = C.getcontext ("2d");varIMG =NewImage (); IMG.SRC= "Http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg"; Img.onload=function() {Ctx.globalalpha= 0.5; Ctx.drawimage (IMG,0,0); Ctx.globalalpha= 1; Ctx.scale (0.5,0.5);//reduced to 0.5 times timesCtx.transform (0.5,0,0,0.5,0,0);//deformation, then reduced to 0.5 times timesCtx.drawimage (img,0,300);}

After the implementation can see, transform () in the original has shrunk 0.5 times times the basis, and the picture continues to shrink 0.5 times times, that is, the second picture drawn is the first one of the 1/4:

Let's change transform () to SetTransform () and try it out:

varc = document.getElementById ("MyCanvas");varCTX = C.getcontext ("2d");varIMG =NewImage (); IMG.SRC= "Http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg"; Img.onload=function() {Ctx.globalalpha= 0.5; Ctx.drawimage (IMG,0,0); Ctx.globalalpha= 1; Ctx.scale (0.5,0.5);//reduced to 0.5 times timesCtx.settransform (0.5,0,0,0.5,0,0);//deformation, then reduced to 0.5 times timesCtx.drawimage (img,0,300);}

You can see that SetTransform () resets the zoom effect, that is, the first scale (0.5,0.5) effect is pass-off, and you can try to change scales () to scaled (3.5,3.5), but it doesn't do anything.

You can also make several attempts, and you will find that SetTransform () will be well reset, overwriting the previously set scale (), translate (), transform () deformation values.

This chapter is introduced to this, mutual encouragement ~

Html5-canvas Introduction (vi)