Example of image rotation using html5 Canvas

As we all know, canvas is a bitmap, and you can render what you want in it, but you can only edit it by manipulating the properties of the canvas. That is to say, you cannot manipulate things drawn into the canvas. For example, if I add a painting to the canvas, and now I want to move the painting 10px, we cannot directly manipulate the painting because we cannot obtain the painting at all. any information. All we can ever get is the canvas object.

In fact, canvas provides various interfaces to control the canvas. There is a rotate() method for rotation.

In fact, the rotation here does not really rotate the canvas. For example, my ctx.rotate(Math.PI/2) rotates 90°. It does not mean that we will see the canvas rotated 90° on the page. We can understand that canvas actually consists of two parts, one is the canvas visible to the naked eye, and the other is the virtual canvas used for operations. All our actions on the virtual canvas will be mapped to the real canvas.

It may be difficult to understand this, so let’s use a picture to explain it. First, let’s introduce the rotate() method. It can rotate the canvas and rotate the origin of the canvas. The origin of the canvas is the upper left corner by default.

Let’s take a look at the effect of rotating 45°:

Here we can see that the virtual canvas I just mentioned is rotated 45° and then a picture is inserted into the virtual canvas. Then what the real canvas presents is the intersection of the virtual canvas and the real canvas. It may not be easy to understand here, please think about it carefully.

The code for the two pictures is as follows:

 // Unrotated var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.drawImage(img, 0, 0)// Counterclockwise rotation 45°var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.rotate(-Math.PI / 4);ctx.drawImage(img, 0, 0)

Seeing this, I think everyone basically knows how to use rotate().

Let’s talk about how to rotate the center of the picture

Let me talk about how to use the other two methods of canvas:

ctx.translate(x, y): This method is a method that can move the origin of the canvas. The parameters are x and y;

ctx.drawImage(img, x, y): This method has been used above, but it has three parameters. The first one is the dom of the image to be inserted, and the next two x and y are the parameters for img when inserting the image. The location is modified.

As can be seen from the picture, if you want to rotate 45° around the center of the picture, you have to move the origin of the canvas to the center of the picture, then rotate the canvas, and then when inserting the picture, translate the picture to the upper left corner by half of the picture itself.

There are three steps here:

1. Move canvas origin
2. Rotate canvas
3. Insert picture and move

Let’s take a look at these three steps separately (the width and height of the picture are 400 and 300)

Move canvas origin

 var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.drawImage(img, 0, 0)

Rotate canvas

 var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, 0, 0)

Insert picture and move

 var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, -200, -150)

That's it you're done

ps: After completing a series of actions, everyone must rotate the origin of the canvas to restore it. Otherwise, after a series of operations, the canvas settings will be messed up. Just restore the settings back to their original state after each operation.

 var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150) // 1ctx.rotate(-Math.PI / 4) // 2ctx.drawImage(img, -200, -150)// Restore settings (the steps to restore should be reversed to the steps you modified) ctx.rotate(Math.PI / 4) // 1ctx.translate(-200, -150) // 2// After that, the origin of the canvas returns to the upper left Angle, the rotation angle is 0//Other operations...

Another thing to note is that what I just demonstrated is an example where the x-axis and y-axis of the image relative to the canvas are 0. If it is not 0, just move the origin ctx.translate(200+x, 150 +y). The 200 and 150 here are half the width and height of the image, and x and y are the x and y of the image relative to the canvas.

This article only talks about rotation in the center of the image. Later I will write about rotation and scaling of the image. If there is anything poorly written or wrong, please point it out.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.