Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use Canvas to achieve transformation in HTML5", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to transform with Canvas in HTML5".

Morphing (that is, transform ()) is a less common method. Before introducing this method, it is necessary to introduce the concept of deformation matrix to the reader (graphics knowledge is involved here, which can be skipped if you are not interested).

In mathematics, a matrix refers to a two-dimensional data table arranged vertically and horizontally, which first comes from a square matrix composed of coefficients and constants of the system of equations, and its main function is to simplify the solution of linear equations. A matrix, similar to a database table, is a collection of row and column numbers. According to the column length of the matrix, the N row N column matrix can be called N × N matrix. Where the row vector is an N × 1 matrix and the column vector is a 1 × N matrix.

Matrices can be operated in many ways. In general, the addition operation is used for the translation of the image, while the multiplication operation is used for the deformation operation of the graph. When doing matrix multiplication, it must be satisfied that the number of columns of the first matrix should be equal to the number of rows of the second matrix.

For the deformation matrix, take scaling as an example to illustrate. Referring to the example in the previous section, to magnify the element 2 times, you can generally use ctx.scale (2Magne2).

For the original element, it has a coordinate (xforce y), which we regard as a row and two columns of matrix A [x force y], the target coordinate is (2x force 2y), and then it is regarded as a matrix B [2x force 2y], then its transformation matrix is a 2 × 2 matrix. Going back to the transform () method, this method has six parameters, namely transform (M11, M12, M21, M22, M13 and M23).

The details of these six parameters are as follows:

The parameter description of transform ():

M11 controls the x-axis size of the element. Positive numbers are magnified and negative numbers are reduced

M12 controls the rotation of the element. Positive numbers are clockwise and negative numbers are counterclockwise

M21 controls the tilt of elements. A positive number means tilting to the right, and a negative number means tilting to the left.

M22 controls the y-axis direction of the element

M13 controls the x-axis coordinate position of the element

M23 controls the y-axis coordinate position of the element

Canvas methods such as translate (), scale (), and rotate () are all special cases of transform (). These parameters are described by comparison below.

The  coordinate transformation translate (dx,dy) is equivalent to transform.

 scaling scale (sx,xy) is equivalent to transform (sx,0,0,sy,0,0).

 rotating rotate (A) is equivalent to transform (cosA,sinA,-sinA,cosA,0,0). If the rotation angle An is based on (dx,dy), the expression is

Transform (cosA, sinA,-sinA, cosA, dx (1-cosA) + dysinA, dy (1-cosA)-dxsinA)

If you sx,sy the scale with (dx,dy) as the base point, the expression is

Transform (sx, 0,0, sy, dx (1-sx), dy (1-sy))

It is necessary to introduce the setTransform () method, which is combined with the transform () method, and its parameters are the same as those of the transform () method. The current matrix should be reset when in use, and then the transform () method should be called with the same parameters, which is not discussed in detail here.

Here is an example to illustrate the scaling use of transform (). The code is as follows:

Ctx.fillStyle = 'rgba (0,0,0,0.2)'

Ctx.fillRect (0,0,200,200)

Ctx.save ()

Ctx.transform (2pj0re0p0pl 2p0p0p0p0)

Ctx.fillStyle = 'rgba (0,0,0,0.4)'

Ctx.fillRect (0,0,200,200)

Ctx.restore ()

At this point, I believe you have a deeper understanding of "how to use Canvas to achieve deformation in HTML5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.