The example explains how to use the HTML5 Canvas API to operate the image rotation, html5canvas

The example explains how to use the HTML5 Canvas API to operate the image rotation, html5canvas

As a web developer, I have been dealing with HTML5 canvas elements. Rendering an image is a big branch that is very important and commonly used. Therefore, today's tutorial is about canvas Image Display and how to rotate the image. It may be something you really want now.

In general, there are two ways to rotate the canvas: center Rotation and Reference point rotation. Skillful application of the rotation function will be of great help to your development work.

About the center rotation of an object
For the first type of rotation, we need to see that it is to rotate an object to its center. The canvas element is the simplest rotation type. We tested the image of a gorilla as material.
The basic idea is to rotate the canvas according to a central point, rotate the canvas, and then return the canvas to its original position. If you have some experience with graphics engines, it should sound familiar. The code is like this: (click to see the effect)

Copy the content to the clipboard using JavaScript Code

1. Function onload (){
2. Var canvas = document. getElementById ('c1 ');
3. Var ctx1 = canvas. getContext ('2d ');
4. Var image1 = new Image ();
5. Image1.onload = function (){
6. // Regular rotation about center
7. Var xpos = canvas. width/2;
8. Var ypos = canvas. height/2;
9. Ctx1.drawImage (image1, xpos-image1.width/2, ypos-image1.height/2 );
10. Ctx1.save ();
11. Ctx1.translate (xpos, ypos );
12. Ctx1.rotate (47 * Math. PI/180); // 47 degrees of Rotation
13. Ctx1.translate (-xpos,-ypos );
14. Ctx1.drawImage (image1, xpos-image1.width/2, ypos-image1.height/2 );
15. Ctx1.restore ();
16. }
17. Image1.src = 'image.png ';
18. }

Annotations are already very detailed, but I still want to mention:. save () and. restore (). Their role is to save the canvas before rotation and restore it after rotation. It is critical to effectively avoid conflicts with other rendering services. Many of our friends have not been able to rotate smoothly, most of which is the cause.

Rotate around a point
The second type is image rotation around a certain point in space, which will become more complicated. But why? In many cases, you need to refer to another object for rotation. A single center-centered rotation cannot meet your needs. In addition, the latter will be more commonly used. For example, rotation is often used in web games.

Copy the content to the clipboard using JavaScript Code

1. Function onload (){
2. Var canvas2 = document. getElementById ('c2 ');
3. Var ctx2 = canvas2.getContext ('2d ');
4. // Regular rotation about point
5. Var image2 = new Image ();
6. Image2.onload = function (){
7. // Regular rotation about a point
8. Var angle = 120 * Math. PI/180; // angle of rotation in radians
9. Var rx = 300, ry = 200; // the rotation x and y
10. Var px = 300, py = 50; // the objects center x and y
11. Var radius = ry-py; // the difference in y positions or the radius
12. Var dx = rx + radius * Math. sin (angle); // the draw x
13. Var dy = ry-radius * Math. cos (angle); // the draw y
14. Ctx2.drawImage (image2, 300-image2.width/2, 50-image2.height/2 );
15. Ctx2.beginPath ();
16. Ctx2.arc (300,200, Math. PI * 2, false );
17. Ctx2.closePath ();
18. Ctx2.fillStyle = 'rgba (0,255, 0, 0.25 )';
19. Ctx2.fill ();
21. Ctx2.save ();
22. Ctx2.translate (dx, dy );
23. Ctx2.rotate (angle );
24. Ctx2.translate (-dx,-dy );
25. Ctx2.drawImage (image2, dx-image2.width/2, dy-image2.height/2 );
26. Ctx2.restore ();
27. }
28. Image2.src = 'smallimage.png ';
29. }

The code is concise, and the function is to rotate an image 120 degrees by point, which is more vivid.

Draw a magic Logo
This is a logo seen on DU Niang, cleverly using the Rotation Transformation, using a very simple rectangle, through the Rotation Transformation, into a very beautiful logo. Is this logo a magic? Shoes are moving their brains and try to implement it. The code for implementing it is provided below.

Copy the content to the clipboard using JavaScript Code

1. <! DOCTYPE html>
2. <Html lang = "zh">
3. <Head>
4. <Meta charset = "UTF-8">
5. <Title> draw a magic Logo </title>
6. <Style>
7. Body {background: url ("./images/bg3.jpg") repeat ;}
8. # Canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto ;}
9. </Style>
10. </Head>
11. <Body>
12. <Div id = "canvas-warp">
13. <Canvas id = "canvas">
14. Does your browser support Canvas ?! Just change one !!
15. </Canvas>
16. </Div>
18. <Script>
19. Window. onload = function (){
20. Var canvas = document. getElementById ("canvas ");
21. Canvas. width = 800;
22. Canvas. height = 600;
23. Var context = canvas. getContext ("2d ");
24. Context. fillStyle = "# FFF ";
25. Context. fillRect (0, 0, 800,600 );
27. For (var I = 1; I <= 10; I ++ ){
28. Context. save ();
29. Context. translate (400,300 );
30. Context. rotate (36x I * Math. PI/180 );
31. Context. fillStyle = "rgba (255,0, 0, 0.25 )";
32. Context. fillRect (0,-200,200,200 );
33. Context. restore ();
34. }
35. };
36. </Script>
37. </Body>
38. </Html>

Running result:

Is it really cool? It is quite simple to analyze this image, that is, to rotate a positive shape with the center of the center at the midpoint of the screen (that is, the vertex in the lower left corner of the initial square.

Is Art wonderful? You must have realized the wonders of Canvas. A few simple lines of code can achieve endless results. As long as the brain hole is large enough, nothing can be done. So raise the banner of our artists, speed up the pace, and move on!