Image rotation under IE and standard browser (ii)--canvas (1)

Article too long, an article can not be saved.

Image rotation under IE and standard browser (i)--filter, CSS3

3. Canvas

Canvas is a new label in HTML5, before we use canvas we first look at its definition:<canvas> tag is just a graphics container, you must use a script to draw the graph. This tag is used for drawing, including 2d and 3d, there are many ways, because we just take to achieve the rotation of the picture, so only need to understand the 3 methods, the detailed use of the canvas will be written in the future space.

First, the canvas implementation of the principle of rotating pictures: The canvas tag is equivalent to create a canvas, not only can draw on it, you can also insert a picture, when we insert a picture in the canvas, and use its provided rotation method to rotate the canvas, you can achieve the purpose of rotating the picture.

Canvas canvas rotation around dots, example

Suppose the Blue Square is a canvas label, and when we rotate its contents, it is the entire canvas of rotation, but the position and size of the canvas itself will not change, and when the content is rotated beyond the canvas, it will be obscured, and the default rotation origin is 00 coordinates, which is the upper left corner of the canvas, and No matter how it rotates, its x-axis and y-axis will not change, even if we rotate 90 degrees or 180 degrees. Will PS classmate can refer to the layer rotation, the center point in the upper left corner can be.

Take a look at the image store icon:

After the default rotation of 90 degrees, the contents are all beyond the canvas and will not be displayed, with the X and Y axes unchanged. As shown in the following:

Let's start with an example:

Javascript:

$ (function () {
var canvas = document.getElementById ("Img_box"). GetContext (' 2d ');
var img = new Image ();
Img.onload = function () {
Canvas.drawimage (img,0,0);
}
IMG.SRC = ' 12.jpg ';
})

Css:

#img_box {background: #e5e5e5;}

Html:

<canvas id= "Img_box" width= "400px" height= "200px" ></canvas>

Effect

Explain the code a little bit:

(1) var canvas = document.getElementById ("Img_box"). GetContext (' 2d ');
Get canvas labels and use 2D paint mode

(2) var img = new Image ();
Create a Picture object

(3) Img.onload = function () {}

Execute function after the picture is loaded

(4) Canvas.drawimage (img,0,0);

The DrawImage () method allows you to insert additional images in the canvas. The parameters can be 3 (displacement) 5 (displacement, scale) or 9 (displacement, scaling, cropping). We use 3 to be enough, the first parameter is the picture address, the second is the x-axis displacement, the third is the y-axis displacement, we let the picture and the origin (0,0) alignment is possible.

If we set the size of the canvas and the size of the picture, so long as the image is full of canvas, the above example of our image is 120*90, we have the size of the canvas label is also set to 120*90 will be like this:

You can see that there are no gray areas, only pictures.

If we are going to rotate it we need to use the rotate () method, the Rotate (Math.PI) represents a clockwise rotation of 180 degrees, that is to say math.pi=180 degrees,-math.pi=-180 degrees, math.pi/2=90 degrees, and so on. Let's take a rotation of 45 degrees for example:

Javascript:

$ (function () {
var canvas = document.getElementById ("Img_box"). GetContext (' 2d ');;
var img = new Image ();
Img.onload = function () {
Canvas.drawimage (img,0,0);
}
Canvas.rotate (MATH.PI/4);

IMG.SRC = ' 12.jpg ';
})

Css:

#img_box {background: #e5e5e5;}

Html:

<canvas id= "Img_box" width= "120px" height= "90px" ></canvas>

Effect

We can see that after the rotation using the rotate () method method, as shown in the previous principle, the canvas label size is the same, and the content rotates the entire canvas around the origin (0,0). The excess part will be hidden away. From this we can infer that when rotated 90 degrees, the picture will not be completely visible. We need to pull back the picture, and change the size of the canvas label to the size of the image rotation, that is, the width and height interchange.

So we need to reset the origin position using the translate () method. The following 90 degrees rotation as an example, if you do not understand the value of translate () students, carefully consider the above about the origin, XY axis schematic, XY axis unchanged.

Javascript:

$ (function () {
var canvas = document.getElementById ("Img_box"). GetContext (' 2d ');;
var img = new Image ();
Img.onload = function () {
Canvas.drawimage (img,0,0);
}
Canvas.rotate (MATH.PI/2);
Canvas.translate (0,-90);
IMG.SRC = ' 12.jpg ';
})

Css:

#img_box {background: #e5e5e5;}

Html:

<canvas id= "Img_box" width= "90px" height= "120px" ></canvas>

Effect

If we need to rotate multiple times, we need to reset the origin to the original state before each rotation. For example, we perform a 90 degree rotation:

Canvas.rotate (MATH.PI/2);
Canvas.translate (0,-90);

When we rotate 90 degrees again, we need to reset the origin and then rotate:

Canvas.translate (0,90);
Canvas.rotate (MATH.PI/2);
Canvas.translate ( -120,-90);

Full 360-degree clockwise rotation code:

Canvas.rotate (MATH.PI/2); Rotate clockwise 90 degrees
Canvas.translate (0,-90); Displacement, displayed on the canvas

Canvas.translate (0,90); Reset origin Point (0,0)
Canvas.rotate (MATH.PI/2); Rotate 90 degrees again, this is 180 degrees.
Canvas.translate ( -120,-90); Displacement

Canvas.translate (120,90); Reset Origin Point
Canvas.rotate (MATH.PI/2); Continue to rotate 90 degrees, this time 270 degrees
Canvas.translate ( -120,0); Displacement

Canvas.translate (120,0); Reset Origin Point
Canvas.rotate (MATH.PI/2); Continue to rotate 90 degrees, this time 360 degrees, no displacement

Of course, we can also change the center point first, then rotate the canvas, and then insert the picture, to rotate 90 degrees for example:

Translate (90,0); canvas.rotate (MATH.PI/2); we see that if this is the case, the value of translate is different from the previous one because, before the first rotation, the center point is the origin, and after the rotation the picture is hidden, We need to move the center point after the rotation of the visual position, visually moving downward (positive), in fact, relative to the rotated canvas is left up (negative), and the first rotation of the canvas, we have to calculate the position of the rotation of the point in advance, and then move to the right, because it is not rotated, Therefore, moving to the right from the origin is the same as the direction of the visual movement, so it is a positive number. Do not understand the students to appreciate the experience, look at the example above, I take a square thing to turn, hehe.

If you need to manually reset the origin after each rotation, it is also a bit too complicated to calculate a bit dizzy, in fact, it is not necessary, because the canvas provides us with a Reset method save () and restore ().

Save () is used to save the state of the canvas (note that the canvas is the canvas, not the picture we are drawing or the operation of the image), and restore () restores it. Restore () always looks for the most recent save () restore, and the number of restore () can not be more than the number of Save (), this is not difficult to understand, you save 10 times to restore 11 times, will certainly be wrong.

Let's look at an example:

Javascript:

Window.onload = function () {
var canvas = document.getElementById ("CV");

Canvas.height = 250;
Canvas.width = 400;

var context = Canvas.getcontext ("2d");
Context.save ();

var img1 = new Image ();
Img1.onload = function () {
Context.translate (90,0);
Context.rotate (MATH.PI/2);
Context.drawimage (img1,0,0);
Context.restore ();
}
IMG1.SRC = ' 12.jpg ';


var img2 = new Image ();
Img2.onload = function () {
Context.drawimage (img2,0,0);
}
IMG2.SRC = ' 13.jpg ';
};

Css:

#cv {background: #e5e5e5;}

Html:

<canvas id= "CV" ></canvas>

Effect

If we remove the Context.restore () in img1.onload = function () {}; It will become this:

We see, IMG1 rotated 90 degrees, without restore (), IMG2 is also rotated 90 degrees, plus after img2 not affected, for what? We looked up, we created a canvas canvas, we did a Save (), and we didn't do anything with the canvas canvas, and when IMG1 rotated, the canvas became rotated 90 degrees, and if we joined IMG2 directly, So Img2 is also inserted in the canvas rotation 90, if we use Restore (), then the canvas will revert to the last save state (note that the canvas canvas is restored, our operations on IMG1 will not be affected), When we join the IMG2 again, it will not be affected, it is a very important way to use, complex drawing is to use multiple save () and restore ().

Article too long, an article can not be saved

Image rotation under IE and standard browser (ii)--canvas (2)

Image rotation under IE and standard browser (ii)--canvas (1)