An example is given to explain the method of using HTML5 canvas API to operate graphic rotation

Time:2021-7-28

As a web developer, I’ve been working with HTML5 canvas elements. Rendering pictures is a big branch, which is very important and commonly used. Therefore, today’s tutorial is about canvas image display and how to rotate images. Maybe it’s a good thing you really want now.

In general, there are two ways of canvas rotation: center rotation and reference point rotation. Skilled application of rotation function will be of great help to your development works.

About the center rotation of objects
The first type of rotation we want to see is to rotate an object at its center. The implementation uses canvas elements, which is one of the simplest rotation types. We experimented with a picture of a gorilla.
The basic idea is that we should 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, then this should sound familiar. The code is like this: (click to see the effect)

JavaScript CodeCopy contents to clipboard
  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);//Rotate 47 degrees  
  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.   }     

2016322114126609.gif (383×384)

The comments are very detailed, but I still want to mention one thing:. Save() and. Restore(). Their function is to save the canvas before rotation, and then restore it after rotation. It is very important to effectively avoid conflicts with other rendering. Many friends do not rotate smoothly, mostly for this reason.

Rotate around a point
The second type is that the image rotates around a point in space, which will become more complex. But why? In many cases, you need to rotate an object by referring to another object. A single rotation around the center cannot meet the demand. And the latter will be more commonly used. For example, rotation is often used in web games.

2016322114156905.jpg (422×253)
JavaScript CodeCopy contents to clipboard

  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,5,0,Math.PI*2,false);   
  17.       ctx2.closePath();   
  18.       ctx2.fillStyle = ‘rgba(0,255,0,0.25)’;   
  19.       ctx2.fill();   
  20.          
  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.   }  

2016322114243019.gif (614×416)

The code is simple. The function is to rotate a picture 120 degrees according to a point. This picture is more vivid.

Draw magic logo
This is a logo seen on Du Niang. It skillfully uses the rotation transformation. It uses a very simple rectangle to turn into a very beautiful logo through the rotation transformation. Is this logo very magical? Children’s shoes use their brains to try to realize it. Next, I provide the code to implement it.

JavaScript CodeCopy contents to clipboard
  1. <!DOCTYPE html>   
  2. <html lang=“zh”>   
  3. <head>   
  4.     <meta charset=“UTF-8”>   
  5. < title > Draw 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. Your browser doesn’t support canvas?! Change one quickly!!
  15.     </canvas>   
  16. </div>   
  17.   
  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);   
  26.   
  27.         for(var i=1; i<=10; i++){   
  28.             context.save();   
  29.             context.translate(400,300);   
  30.             context.rotate(36 * 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>  

Operation results:
2016322114315247.jpg (417×318)

Very cool, isn’t it? A little analysis of this figure shows that it is quite simple, that is, let an orthographic shape rotate with the midpoint of the screen (i.e. the vertex at the lower left corner of the initial Square) as the center of the circle.

Isn’t art wonderful? You must have realized the wonder of canvas. A few lines of code can achieve endless results. As long as the brain hole is big enough, nothing can not be achieved. Therefore, raise the banner of our artists, speed up the pace and continue to move forward!

Recommended Today

Implementation example of go operation etcd

etcdIt is an open-source, distributed key value pair data storage system, which provides shared configuration, service registration and discovery. This paper mainly introduces the installation and use of etcd. Etcdetcd introduction etcdIt is an open source and highly available distributed key value storage system developed with go language, which can be used to configure sharing […]