Html5 Canvas provides an example of image rotation,

Html5 Canvas provides an example of image rotation,

As we all know, canvas is a bitmap. You can render what you want in it, but you can only edit canvas attributes. That is to say, you cannot operate the painting into the canvas. For example, if I add a painting to the canvas and want to move the painting 10 PX, we cannot directly operate the painting, because we cannot get any information about the painting. We can only get the canvas object.

That's the problem. How can I rotate the image?

In fact, canvas provides a variety of interfaces to control the canvas, and the rotate () method is used for rotation.

In fact, the rotation here does not actually rotate the canvas. For example, I use ctx. rotate (Math. PI/2) to rotate 90 °. It does not mean that the canvas is rotated 90 ° on the page. We can understand that canvas is actually composed of two parts: one is the visual canvas and the other is the virtual canvas for operation, all our actions on the virtual canvas will be mapped to the real canvas.

This may be difficult to understand. The following diagram is used to explain a wave. First, we will introduce the rotate () method. First, it can rotate the canvas and rotate the source of the canvas. The source of the canvas is the upper left corner by default.

The following shows the effect of 45 ° rotation:

Here we can see that the virtual canvas I just mentioned is rotated 45 ° before inserting an image into the virtual canvas, then, the real canvas shows the intersection of the virtual canvas and the real canvas. This may not be easy to understand. Think about it carefully.

The code for the two images is as follows:

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

I want you to know how to use rotate.

The following describes how to rotate the image center.

Let's take a look at the usage of the other two methods of canvas:

Ctx. translate (x, y): This method can be used to move the canvas origin. The parameters are x and y;

Ctx. drawImage (img, x, y): This method has been used, but there are three parameters in it. The first is the image dom to be inserted, followed by two x, y is the position of the img when the image is inserted.

As you can see from the figure, if you want to rotate around the image center by 45 °, you have to move the canvas origin point to the center of the image and then rotate the canvas, then, when you insert an image, the image is moved to the upper left corner to half of the image itself.

There are three steps:

1. Move canvas Origin
2. Rotate a canvas
3. Insert and move an image

 

Next, let's take a look at these three steps separately (the image width and height 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 a 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 and move an image

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)

This is all done.

Ps: after you complete a series of operations, you must restore the canvas origin point by rotation. Otherwise, after a series of operations, the canvas settings will be messy. After each operation is completed, the settings are restored to the original state.

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 restoration steps should be reversed with the steps you modified) ctx. rotate (Math. PI/4) // 1ctx. translate (-200,-150) // 2 // The canvas origin is returned to the upper left corner, and the rotation angle is 0 // other operations...

Note that I just demonstrated the example where the image is 0 relative to the x-axis Y-axis of the canvas. If the value is not 0, ctx is needed when the origin is moved. translate (200 + x, 150 + y ). 200 and 150 are the width and height of the image. x and y are the x and y of the image relative to the canvas.

This article is about rotating in the image center, and then I will write the rotation and image scaling. There is something wrong with writing.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.