html5 teaches you to make cool fragments picture switch (Canvas)

Old rules, first apply the source code. The picture area can be clicked, and the animation will start from the click position.

I originally did this effect three years ago, but it was done with countless DIV tags. The performance was more problematic, and it was completely unable to run at all. Recently, I want to learn a great god with pure CSS to learn a CSS effect. The helpless skills can only give up. Finally, I chose to use Canvas to complete it.

1. First of all, prepare a number of pictures of the same size. The size of the picture in this example is 1920 * 1080 (note: the size here is the size of the original picture, not the size displayed on the page by CSS). In order to facilitate the use, add these pictures to a hidden element in HTML for later use.

 <div class = 'hide'> <img class = 'img' src = './images/a.jpg'/> <img class = 'img' src = './images/b.jpg'/> <img class = 'Img' SRC = './Images/C.JPG'/> <IMG Class = 'Img' SRC = './Images/D.jpg'/> <IMG class = 'IMG' SRC = './ images/e.jpg '/> </div>

 .hide {Display: None;}

2. Insert a Canvas canvas in HTML, and it is determined by size, but it must be ensured that it is consistent with the width and height of the picture resources. The size of the canvas in this example is 800 * 450.

 <canvas id = mycanvas width = 800 height = 450> Your browser does not support Canvas </canvas>

3. The basic code is as follows, first obtain the context object of the canvas; secondly, obtain the picture object; finally draw the picture through the DrawImage method.

 var ctx = document.queryselector ('#mycanvas'). GetContext (' 2d '), img = documeryselector (' .beginpath (); ctx.DrawImage (i mg, 0, 0); CTX .closepath (); ctx.stroke ();

I believe that many people can understand quickly after watching it. This is a combination of several small units. Each unit is only responsible for drawing a small part of the picture. Finally, it becomes a complete picture.

Then before explaining the source code, let's review the usage of the DrawImage function in Canvas. Since we need to use the 9 parameters of this function, there are many parameters, and we need to keep in mind the meaning and reference object of these parameters.

 Context.DrawImage (IMG, SX, SY, SWIDTHT, Sheight, X, Y, Width, Height, Height);

· IMG: The image, canvas or video that specifies to be used

· SX: The X coordinate position of the cutting of cutting

· SY: The Y coordinate position of the cutting of cutting

· SWIDTH: width of the image of the cut image

· Sheight: The height of the image was cut

· X: Place the x coordinate position of the image on the canvas

Y: Place the Y coordinate position of the image on the canvas

· Width: the width of the image you want to use

· Height: The height of the image you want to use

I believe that even if the above parameters are listed, it is still easy to faint when developing. Here is a tips for everyone: In addition to the first IMG parameter, there are 8 parameters, of which the size reference of the first 4 parameters is the original map, that is, 1920 * 1080; Gotic, 800 * 450.

Remember this formula, it is not easy to faint when it is actual.

The division is to set the size of a unit in the canvas. The most important thing is that the unit size can be removed by the two edge lengths of the picture, that is, the unit size should be the number of equivalent to the picture. The number of conventions is not necessarily the maximum number or the minimum of the division, because the excessive effect is not dazzling, and the small performance will be under pressure.

Taking the size of the 800 * 450 in this example, I choose 25 * 25 as the unit size here, that is, the entire canvas consist of 32 * 18 in total of 576 cells. After dividing the grid, we need to calculate some basic parameter spare.

 VAR ImgW = 1920, // Pictures of the original width/height iMgh = 1080; VAR CONW = 800, // canvas width/height CONH = 450; var dw = 25, // canvas unit width/high dh = 25; VAR I i I I i I I i I I i I I i I I i I I i I I I i I = Conh /DH, // Unit /column number j = conw /dw; var dw = imgw /j, // The original graph width /high dh = imgh /i;

The first three sets of parameters are set by us before. We need to pay attention. When calculating the fourth group/ column number, we must be clear:行数= 画布高度/ 单元格高度；列数= 画面宽度/ 单元格宽度. If this is reversed, it will be forced later. The last set of DW/DH is a cell size that enlarges and converts to the original picture, which is used for later tailoring pictures.

In order, we first draw the cell in the upper left corner. Because its原图裁切位置and画布摆放位置(0, 0), the easiest.

 CTX.DRAWIMAGE (IMG, 0, 0, DH, DH, 0, 0, DH);

Successful. So how to write the second line now, how to write the picture in the third column?

 var I = 2, J = 3; CTX.DRAWIMAGE (IMG, DW*J, DH*i, DH, DH, DH*i, DH);

What is easy to confuse here is that裁剪或摆放的横坐标为单元格宽度* 列号，纵坐标为单元格高度* 行号.

For convenience, a pure function responsible for rendering is encapsulated. It does not participate in the logic, and it will only be drawn according to the transmitted picture objects and coordinates.

 Function handledraw (img, i, j) {ctx.DrawImage (IMG, DW*J, DH*i, DH, DW*J, DH*i, DH);}

After the rendering method is encapsulated, the entire picture is rendered through the dual cycles of rows and columns.

 ctx.beginpath (); for (var I = 0; i <i; i ++) {for (var j = 0; j; j ++) {handledraw (img, i, j);}} ctx .closepath (); ctx.stroke ();

Perfect ~. In fact, the core part of this step is completed. Why? Because at this time this picture is already combined with hundreds of cells, and everyone can give it an animation effect with the imagination of Tianma.

Before sharing your animation algorithm, let me show you what the wrong spelling is ~

It's a bit cool ~

Let's share my animation algorithm. How is the effect in DEMO achieved?

Since each cell has ranked number (i, j) on the grid of the canvas. I hope that after a coordinate (i, J), we can get all the points around the coordinates from near to far. The specific picture below, too lazy to make a picture ~

For example, the coordinates are (3, 3)

There are 4 points with a distance of 1 (2, 3), (3, 4), (4, 3), (3, 2) in total;

There are points with a distance of 2 (1, 3), (2, 4), (3, 5), (4, 4), (5, 3), (4, 2), (3, 1), (2), (2) 2) There are 8 in total;

..........

It is also easy to find the algorithm of this series of points, because行号差值的绝对值+ 列号差值的绝对值= 距离, the specific:

 Function countaround (i, j, dst) {var resarr = []; for (varm m = (i-dst); m <= (i+dst); m ++) {for (var n = (j-dst); n <= (j+dst); n ++) {if (math.abs (mi)+math.abs (nj) == dst) {resarr.push ({x: m, y: n});} }} Return resarr;}

This function is used to give a given coordinate and distance (DST), and find all the points on the distance around the coordinates to return in the form of an array. However, the algorithm above has less boundary limitations, as follows:

 countaround (i, j, dst) {var resarr = []; for (varm m = (i-dst); m <= (i+dst); m ++) {for (var n = (j-dst); n <= (j+dst); n ++) {if (math.abs (mi)+math.abs (nj) == dst) && (m> = 0 && n> = 0) && (m <= (i i -1) && n <= (j-1))) {resarr.push ({x: m, y: n});}}} Return resarr;}

In this way, we have a pure function that calculates all points on the surrounding fixed distance, and then starts to complete the animation rendering.

First write a clearing function for clearing the content of the cell. You only need to pass the coordinates to remove the content on the coordinated component, and to draw a new pattern after waiting.

 handleclear (i, j) {ctx.clearrect (dw*j, dh*i, dw, dh);}

Anotherimg is the next picture, and finally draws a new picture to the outer layer through SetInterval to complete the fragmented gradient effect.

 Var dst = 0, intervalbj = setInterVal (function () {var resarr = countaround (i, j, dst); resarr.Foreach (insertm, index) {handleclear (item.x, item. y); Handledraw (Anotherimg Item.x, item.y);}); if (! Resarr.Length) {Clearinterval (intervalobj);} dst ++;}, 20); 20);

When the length of the array returned by the countaround is 0, that is, all points at the coordinate point are outside the boundary, and the timer cycle is stopped. At this point, all core code has been introduced. Please check the source code for specific implementation.

At present, any coordinates on a given canvas can spread the fragmented picture switching effect from this point to the surroundings.

When automatic rotation, start the animation from the preset 8 points (four corners and the middle point of four sides). The 8 points coordinates are as follows:

 var randompoint = [{x: 0, y: 0}, {x: i -1, y: 0}, {x: 0, y: j -1}, {x: i -1, y: j - 1 }, {x: 0, y: math.ceil (j / 2)}, {x: i -1, y: math.ceil (j / 2)}, {x: math.ceil (I / 2), y: 0}, {x: math.ceil (I / 2), y: j -1}]

When clicking, the clicks are calculated, starting the animation from the point.

 Function handleclICK (e) {var Offsetx = e.offsetx, officey = e.offsety, j = math.floor (offsetx / dw), i = math.floor (offsety / dh), // with i, j, start starting to start. Animation ...},

At present, this effect is only DEMO stage. If you have time, you will plug -in this effect, which is convenient for friends who are interested.

The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.