HTML5Canvas Implementation of PAN/zoom/rotate deom example (screenshot attached) _ html5 tutorial tips-

HTML5Canvas provides the graphic implementation API, which can be used to easily implement translation, rotation, and contraction. We will share with you the specific implementation and reference diagram of translation, rotation, and contraction, if you are interested, refer to the following: I hope to help you with the HTML5 Canvas, which provides an API for image translation, rotation, and contraction.
Translate)
Translate coordinates translate (x, y) means to translate (0, 0) coordinates to (x, y). The original (0, 0) coordinates are changed to (-x,-y)
The figure is as follows:

Any Original Coordinate point p (ox, oy) after the translate is p (ox-x, oy-y), where the point (x, y) is
Point Coordinate translate (x, y ).
Code Demonstration:

The Code is as follows:

// Translate is move the startpoint to centera and back to top left corner
Function renderText (width, height, context ){
Context. translate (width/2, height/2); // The Center Coordinate is (0, 0)
Context. font = "18px Arial ";
Context. fillStyle = "blue ";
Context. fillText ("Please Press To Exit Game ", 5, 50 );
Context. translate (-width/2,-height/2); // the coordinate of translation restoration () is the upper left corner.
Context. fillText ("I'm Back to Top", 5, 50 );
}

Scale)
Scale (a, B) means to Scale the object down to a x and B * y respectively along the XY axis. Results:

The Code is as follows:

// Translation the rectangle.
Function drawPath (context ){
Context. translate (200,200 );
Context. scale (2, 2); // Scale twice size of original shape
Context. strokeStyle = "green ";
Context. beginPath ();
Context. moveTo (0, 40 );
Context. lineTo (80, 40 );
Context. lineTo (40, 80 );
Context. closePath ();
Context. stroke ();
}

Rotate)
Rotation Angle rotate (Math. PI/8)

The coordinate p (x, y) before rotation corresponds to the coordinate P (rx, ry) after rotation.
Rx = x * cos (-angle)-y * sin (-angle );
Ry = y * cos (-angle) + x * sin (-angle );
Rotating 90 degrees can be simplified:
Rx = y;
Ry =-x;
The default rotation direction in the Canvas is clockwise. The Demo code is as follows:

The Code is as follows:

// New point. x = x * cos (-angle)-y * sin (-angle ),
// New point. y = y * cos (-angle) + x * sin (-angle)
Function renderRotateText (context ){
Context. font = "24px Arial ";
Context. fillStyle = "red ";
Context. fillText ("I'm here !!! ", 5, 50 );
// Rotate-90 degreee
// Context. rotate (-Math. PI/2 );
// Context. fillStyle = "blue ";
// Context. fillText ("I'm here !!! );
// Rotate 90 degreee
Context. rotate (Math. PI/2 );
Context. fillStyle = "blue ";
Context. fillText ("I'm here !!! ", 350,-420 );
Console. log (Math. sin (Math. PI/2 ));
// Rotae 90 degree and draw 10 lines
Context. fillStyle = "green ";
For (var I = 0; I <4; I ++ ){
Var x = (I + 1) * 20;
Var y = (I + 1) * 60;
Var newX = y;
Var newY =-x;
Context. fillRect (newX, newY, 200, 6 );
}
}

The general practice is to use rotation and translation, first translate the coordinates (0, 0) to the center position
Translate (width/2, height/2) and then rotate with rotate (Math. PI/2)
The sample code is as follows:

The Code is as follows:

Function saveAndRestoreContext (context ){
Context. save ();
Context. translate (200,200 );
Context. rotate (Math. PI/2 );
Context. fillStyle = "black ";
Context. fillText ("2D Context Rotate And Translate", 10, 10 );
Context. restore ();
Context. fillText ("2D Context Rotate And Translate", 10, 10 );
}

All JavaScript code:

The Code is as follows:

Var tempContext = null; // global variable 2d context
Window. onload = function (){
Var canvas = document. getElementById ("target ");
Canvas. width = 450;
Canvas. height = 450;
If (! Canvas. getContext ){
Console. log ("Canvas not supported. Please install a HTML5 compatible browser .");
Return;
}
// Get 2D context of canvas and draw image
TempContext = canvas. getContext ("2d ");
// RenderText (canvas. width, canvas. height, tempContext );
SaveAndRestoreContext (tempContext );
// DrawPath (tempContext );
}
// Translate is move the start point to centera and back to top left corner
Function renderText (width, height, context ){
Context. translate (width/2, height/2 );
Context. font = "18px Arial ";
Context. fillStyle = "blue ";
Context. fillText ("Please Press To Exit Game ", 5, 50 );
Context. translate (-width/2,-height/2 );
Context. fillText ("I'm Back to Top", 5, 50 );
}
// Translation the rectangle.
Function drawPath (context ){
Context. translate (200,200 );
Context. scale (2, 2); // Scale twice size of original shape
Context. strokeStyle = "green ";
Context. beginPath ();
Context. moveTo (0, 40 );
Context. lineTo (80, 40 );
Context. lineTo (40, 80 );
Context. closePath ();
Context. stroke ();
}
// New point. x = x * cos (-angle)-y * sin (-angle ),
// New point. y = y * cos (-angle) + x * sin (-angle)
Function renderRotateText (context ){
Context. font = "24px Arial ";
Context. fillStyle = "red ";
Context. fillText ("I'm here !!! ", 5, 50 );
// Rotate-90 degreee
// Context. rotate (-Math. PI/2 );
// Context. fillStyle = "blue ";
// Context. fillText ("I'm here !!! );
// Rotate 90 degreee
Context. rotate (Math. PI/2 );
Context. fillStyle = "blue ";
Context. fillText ("I'm here !!! ", 350,-420 );
Console. log (Math. sin (Math. PI/2 ));
// Rotae 90 degree and draw 10 lines
Context. fillStyle = "green ";
For (var I = 0; I <4; I ++ ){
Var x = (I + 1) * 20;
Var y = (I + 1) * 60;
Var newX = y;
Var newY =-x;
Context. fillRect (newX, newY, 200, 6 );
}
}
Function saveAndRestoreContext (context ){
Context. save ();
Context. translate (200,200 );
Context. rotate (Math. PI/2 );
Context. fillStyle = "black ";
Context. fillText ("2D Context Rotate And Translate", 10, 10 );
Context. restore ();
Context. fillText ("2D Context Rotate And Translate", 10, 10 );
}