Brief analysis of Canvas transform

No prelude, direct access to the subject

Transform Call Method:

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

var ctx = document.getElementById ("MyCanvas"). GetContext ("2d"); // call ctx.transform (1,1,-1,1,1,1); // draw a circular path ctx.arc (200,100,25,0,2*math.pi); // draw a filled rectangle ctx.fillrect (200,150,50,50); // Ctx.stroke The path Stroke ();

The results are as follows (only the main parts are intercepted):

After using transform before using transform

At first glance, three changes:

① the position of the two graphs has changed.

② the angle of the rectangle has changed.

③ the size change of the graph

This happens to reflect three properties: displacement , rotation , scaling, and three other APIs corresponding to the canvas are translate (), rotate (), scale (). These three APIs are intuitive to use, but do not achieve certain effects, such as miter cuts .

var canvas = document.getElementById ("MyCanvas");var ctx = Canvas.getcontext ("2d"); the//y axis is gradually stretched to get the right state ctx.transform (1,math.pi/18,0,1,0,0); Ctx.fillrect (200,150,50,50);

Only through the original three more intuitive API does not achieve this effect, but perhaps you have seen elsewhere, transform in addition to achieve oblique cut, but also can directly replace the original three API to achieve their corresponding effect.

(i) Displacement

Replace with transform is to modify the last two parameters: Ctx.transform (a,b,c,d,e,f) where the E and F two parameters.

(ii) rotation

Rotation, you need to match four parameters to achieve, Ctx.transform (a,b,c,D, e,f) of which ABCD four parameters (why four?). Don't worry, just say it later, and you'll remember.

(c) Scaling

Scaling requires only the first two parameters to be modified, Ctx.transform (a, b,c,D, e,f);

--------------------------------------

Please remember the relevant parameters of three cases

--------------------------------------

Then let's talk about why?

First, simple: displacement and scaling

For any point on the axis, A (x, y) moves to B (x1,y1), the coordinate value of point B can be expressed in the following equation:

X1 = x + E

Y1 = y + F

Similarly, for any point on the axis, A (x, y) is scaled to B (x1,y1), the coordinate value of point B can be expressed in the following equation:

X1 = x * A

Y1 = y * d

Where a, d corresponds to the first and fourth parameters in the transform, when the displacement of E and F for the specific values, and when the scale of A and d represents the corresponding X or H axis of the zoom multiplier, so the default multiplier of course is 1 (that is, the original size), the default displacement of course is 0, So we now know that the transform (a,b,c,d,e,f) parameter a,d is 1,e,f to 0.

Next look at the more complex rotations,

At point (0,0), what is the axis of point B after the point A (100,-100) is rotated 45°? (Because the y-axis is positive in our canvas, think about it in a different way).

If you will be able to solve this problem, and can deduce a coordinate with the change in the angle of the formula, then you are very worthy of your geometry teacher, unfortunately I can't push out, I math is hanging section of!!! So I just put the answer right here:

x1 = x * cos (radians)-Y * sin (radians);

y1 = y * cos (radians) + x * sin (radians);

radians = Math.PI * 180/angle

-------------------------------------------------------------

The final formula

X1 = ax + cy + E

y1 = bx + dy + F

Call:

Ctx.transform (cos (radians), sin (radians),-sin (radians), cos (radians), 0,0);

var canvas = document.getElementById ("MyCanvas"); var ctx = Canvas.getcontext ("2d"); var deg = math.pi/180; // Rotation 45 °Ctx.transform (Math.Cos (deg*45), Math.sin (deg*45),-math.sin (deg*45), Math.Cos (deg*45), 0,0); Ctx.fillrect (200,0,50,50);

What if I want to rotate 45° and zoom in twice times and shift to (100,100)? I didn't find the answer anywhere else. I thought a and D were scaled, so how about multiplying by 2?

varCanvas = document.getElementById ("MyCanvas");varCTX = Canvas.getcontext ("2d");vardeg = math.pi/180;Ctx.fillrect (200,0,50,50);//First Square (not deformed)Ctx.settransform (1,0,0,1,0,0); Ctx.beginpath (); Ctx.transform (2*math.cos (deg*45), Math.sin (deg*45),-math.sin (deg*45), 2*math.cos (deg*45), 0,0); Ctx.fillrect (200,0,50,50);//Second Square (only A and D times 2)Ctx.settransform (1,0,0,1,0,0); Ctx.beginpath (); Ctx.transform (2*math.cos (deg*45), 2*math.sin (deg*45), -2*math.sin (deg*45), 2*math.cos (deg*45), 0,0); Ctx.fillrect (200,0,50,50);//the third square (right answer)

you're right, ABCD. Four parameters all multiplied by 2 is the correct one. (For the math is not very good for me, spent four or five hours also can't think of, finally ventured a try all times 2 incredibly magically correct O (∩_∩) o~~)

The same results are obtained with the following two methods:

// First: Direct use of the scaling and rotation APICtx.scale (2,2); Ctx.rotate (Math.PI/180*45); // Second: Use transform to replace the above two APIs separately var deg = Math.pi/180;ctx.transform (2,0,0,2,0,0); Ctx.transform (Math.Cos (45*deg), Math.sin (45*deg ),-math.sin (45*deg), Math.Cos (45*deg), 100,100);

Summarize:

1. Using transform can completely replace the original three API and can make more effects, such as oblique cut;
2. Transform if both pan and rotate, then pan and rotate (the translation and rotation order are different, the result is different, I took the paper, I did it differently--|) ；
3. If the second third parameter of transform is 01 nonzero, it will be chamfered; the second parameter stretches the y-axis, the third x-axis
4. In the rotation effect, if the second is a negative number and the third is a positive number, the rotation direction is counterclockwise
5. Transform effect can be superimposed, settransform can be used to put the canvas back in place before the corresponding effect processing;

Brief analysis of Canvas transform