HTML5 canvas for picture rotation

This article mainly introduced the htm5l canvas realizes the picture rotation example, the small compilation thought quite good, now shares to everybody, also gives everybody to make a reference. Follow the small series together to see it, hope to help everyone.

It is well known that canvas is a bitmap, you can render what you want in it, but you can only manipulate the properties of the canvas for editing. That means you can't manipulate the canvas, for example, I'm adding a picture to the canvas, and now I want to move the picture 10px, and we can't manipulate the painting directly, because we can't get any information about that painting at all. We can always only get to the canvas object.

The question is, how do I rotate the picture?

In fact, the canvas is provided with a variety of interfaces to control the canvas, rotating with the rotate () method.

In fact, the rotation here is not really to rotate the canvas, for example, I ctx.rotate (MATH.PI/2) rotated 90 °. It's not that we see the canvas rotated 90° on the page. We can understand that the canvas is actually made up of two parts, a canvas that is visible to the naked eye, a virtual canvas for operation, and all our actions on the virtual canvas will be mapped to the real canvas.

This may be difficult to understand, the following figure to explain a wave. First introduce the Rotate () method first, it can rotate the canvas, rotate the point Canvas's origin, and the canvas's origin is the upper left corner by default.

Here's a look at the effect of rotational 45°:

Here we can see what I just said the virtual canvas rotates 45° and then inserts the picture into the virtual canvas, and then the real canvas shows the part where the virtual canvas intersects the real canvas. This may not be a good idea, so let's think it over.

The code for the two graphs is this:

Non-rotating var img = document.getElementById (' img ') var canvas = document.getElementById (' canvas ') var ctx = Canvas.getcontext ( "2d") Ctx.drawimage (IMG, 0, 0)//counter-clockwise 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)

See here I think everyone basically know how to use the rotate ().

Here's how to do it again. Image Center Rotation

Let's talk about the use of the other two methods of canvas:

Ctx.translate (x, y): This method is the method that can move the original point of the canvas, the parameters are X, y, respectively;

Ctx.drawimage (IMG, x, y): This method has been used, but there are three parameters, the first is to insert the picture DOM, the next two x, Y, respectively, to insert the image when the location of the IMG is modified.

From the figure can be seen, to achieve around the center of the image rotation 45 °, you have to move the origin of the canvas to the center of the image, then rotate the canvas, and then insert the picture to the upper left corner of the image to translate half of the picture itself.

There are three steps in each of these:

1. Move Canvas origin

2. Rotate Canvas

3. Insert a picture and move

Let's take a look at the three steps below (the picture has a width of 400 and 300)

Move Canvas origin

var img = document.getElementById (' img ') var canvas = document.getElementById (' canvas ') var ctx = Canvas.getcontext ("2d") Ctx.translate (Max, Ctx.drawimage) (IMG, 0, 0)

Rotate Canvas

var img = document.getElementById (' img ') var canvas = document.getElementById (' canvas ') var ctx = Canvas.getcontext ("2d") Ctx.translate (Ctx.rotate,-MATH.PI/4) ctx.drawimage (img, 0, 0)

Insert a picture and move

var img = document.getElementById (' img ') var canvas = document.getElementById (' canvas ') var ctx = Canvas.getcontext ("2d") Ctx.translate (ctx.rotate) (-MATH.PI/4) Ctx.drawimage (IMG,-200,-150)

That's it.

PS: After we have finished a series of actions, we must rotate the original point of the canvas and restore it. Otherwise, after a series of operations, the canvas settings will be confused. It is good to restore the settings back to the original once each operation is complete.

var img = document.getElementById (' img ') var canvas = document.getElementById (' canvas ') var ctx = Canvas.getcontext ("2d") Ctx.translate (max.)         //1ctx.rotate (-MATH.PI/4)        //2ctx.drawimage (IMG,-200,-150)// Restore settings (the steps to restore are reversed with the steps you modified) ctx.rotate (MATH.PI/4)         //1ctx.translate ( -200, -150)       //2//after the origin of the canvas goes back to the upper left corner, the rotation angle is 0// Other operations ...

One more thing to note, I just demonstrated that the picture is relative to the canvas x-axis y-axis of the example shown in 0, if not 0, simply Ctx.translate (200+x, 150+y) when moving the origin. Here the 200 and 150 are half the width of the picture, and X, Y is the image relative to the canvas's X, y