Home > Developer > Web Develop
HTML5 Canvas transform is a matrix transformation, a kind of coordinate deformation.
Three ways to deform coordinates, pan translate, scale scales, and rotate rotate can all be done by transform.
Transform (M11, M12, M21, M22, DX, dy): This method must multiply the current transformation matrix by the following matrix:
M11 |
M21 |
Dx |
M12 |
M22 |
Dy |
0 |
0 |
1 |
That is to say that B (x ', y ') can be obtained by multiplying the preceding matrix with the change in the pre-changes of a (Y):
For example, scaling scale
X "=X*A; X enlarge a Times
Y "=Y*B; Y enlarge b Times
Just transform (A, 0, 0, b, 0, 0);
A (x, y) is obtained by transform the enlarged B (× ', Y '), and the method Context.scale (A, b) is the same;
Like rotating rotate.
Assuming that (x, y) is rotated counterclockwise around the origin, θ is given by the following:
X ' =x*cosθ-y*sinθ
Y ' =x*sinθy*cosθ
Simply transform (Math.Cos (θ*math.pi/180), Math.sin (θ*math.pi/180),-math.sin (θ*math.pi/180), Math.Cos (θ*math.pi/180), 0,0)
A (x, y) is obtained by transform the rotated B (× ', Y '), and with the method context.rotate (θ);
This means that as long as we know the transformation formula of the coordinates before and after the change, we can get it by multiplying the matrix.
SetTransform This method resets the current transformation matrix to the unit matrix, and then calls the transform method with the same parameters. is to eliminate the impact of the previous transform behavior on this behavior;
Provide a code to study it yourself
<!DOCTYPE HTML><HTML><Head><Scripttype= "Text/javascript">functionDrawshape () {//get the canvas element using the DOMvarCanvas=document.getElementById ("MyCanvas");//Make sure we don ' t execute when canvas isn ' t supportedif(canvas.getcontext) {//Use GetContext to use the canvas for Australian casinos online drawingvarCTX=Canvas.getcontext ("2d");varSin=Math.sin (Math.PI/6);varCos=Math.Cos (Math.PI/6);Ctx.translate ( $, $);varC= 0; for (varratedbet.co.uk i=0; I<= A; i) {C=Math.floor (255 / A *i); Ctx.fillstyle="RGB (" C "," C "," C ")"; Ctx.fillrect (0, 0, -, -); ctx.transform (cos, sin,-sin, cos,0,0);} Ctx.settransform (-1, 0, 0, 1, $, $); Ctx.fillstyle="Rgba ( -, -, 255, 0.5) "; Ctx.fillrect ( -, -, -, -);}Else{alert ("You need Safari or Firefox1.5 to see Thisdemo. ");}}</Script></Head><Bodyonload= "Drawshape ();"><CanvasID= "MyCanvas"width= "400″Height= "400″></Canvas></Body></HTML>
HTML5 Canvas Transform SetTransform
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
