Canvas 2D entry to HTML5 RAID 3-transformation and combination

Knowledge preparation-Coordinate System

Before we start the summary transformation, we need to first learn about the coordinate system of canvas.

"Pixel coordinate system": in HTML, we will set the attributes of the canvas: width and height. They are in pixels and describe the final rendering area of the canvas, my image is called "pixel coordinates" (self-created, not very relevant, experts don't laugh). This Coordinate System origin is in the upper left corner of the canvas. After the canvas is created, it will not change (of course, it will change when the width and height are modified), the origin is always in the upper left corner; the number of pixels of x and y is determined by the width and height. To put it bluntly, this is like a canvas when you draw a picture. It's as big as you give it.

Grid coordinate system: the coordinate system used for drawing. When we plot, all units use not the pixel coordinates, but the coordinate system called the grid. To draw a chart of various proportions within a limited canvas, we may need to perform various transformations (translation, rotation, and scaling) on the coordinate system ). Therefore, all the transformations summarized later are for the grid coordinate system.

The relationship between the two coordinate systems is like the relationship between the display and the desktop. The display is equivalent to the pixel coordinate system, and its points are fixed. The desktop is like a grid coordinate system. We can move the desktop at any time, rotate the desktop, and modify the desktop resolution to view more content.

In canvas, by default, the grid coordinates correspond to the pixel coordinates one by one, and the origin is in the upper left corner. Each grid unit corresponds to one pixel unit. The positions of all objects in the canvas are relative to the origin of the grid coordinates. As shown in the following figure, by default, the position of the blue square is the unit x on the left and the unit y on the top (coordinates (x, y )).

 

Knowledge preparation-status maintenance
Before formally introducing deformation, you also need to understand two methods that are essential for drawing Complex Images. These two methods are widely used in deformation.
Save status: context. save ()
Recovery status: context. restore ()
The save and restore methods are used to save and restore the canvas state without parameters. The canvas status is a snapshot of all styles and variants applied to the current screen.
The canvas status is saved as a stack. Each time the save method is called, the current status is pushed to the stack for saving. This status includes:
• Deformation of the current application (I .e. moving, rotating, and scaling );
• All styles: Values of strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, and globalCompositeOperation;
• The current cropping path (clipping path ).
You can call the save method multiple times to import the canvas status to the stack. Each time the restore method is called, the last saved state pops up from the heap and all settings are restored.
The following example shows how to use save and restore:
Function draw (){
Var ctx = document. getElementById ('leson01'). getContext ('2d ');
 
Ctx. fillRect (0, 0, 150,150); // Draw a rectangle with default settings
Ctx. save (); // Save the default state
 
Ctx. fillStyle = '# 09f' // Make changes to the settings
Ctx. fillRect (15, 15, 120,120); // Draw a rectangle with new settings
 
Ctx. save (); // Save the current state
Ctx. fillStyle = '# fff' // Make changes to the settings
Ctx. globalAlpha = 0.5;
Ctx. fillRect (30, 30, 90, 90); // Draw a rectangle with new settings
 
Ctx. restore (); // Restore previous state
Ctx. fillRect (45, 45, 60, 60); // Draw a rectangle with restored settings
 
Ctx. restore (); // Restore original state
Ctx. fillRect (60, 60, 30, 30); // Draw a rectangle with restored settings
}

In the above example, it can be seen that if you manually modify the values of each style each time, it will be very troublesome, especially when there are many style values, it is more prone to errors. At this time, it is very convenient to use save/restore.
Transform
All those who have learned graphics know that there are several types of transformations: movement, rotation, and scaling. To find out the effect of the transformation, we must understand the target of the transformation. As I mentioned above, these transformations are for the grid coordinate system. Let's take a look at these transformations.
Translation Transformation: moves the origin of the grid coordinate system to the specified offset.
Context. translate (x, y)
The translate method accepts two parameters. X is the offset between the left and right sides, and y is the upper and lower offset.
It is a good habit to save the status before deformation. In most cases, calling the restore method is much easier than manually restoring the original state. Especially in the loop, you must pay attention to saving and restoring the canvas status.
Rotation and Transformation: rotate the grid coordinate system clockwise along the origin of the specified angle.
Context. rotate (angle)
This method only accepts one parameter: angle, which is clockwise and measured in radians. The center of the rotation is always the origin of the canvas.
Scaling: scale down or zoom in the coordinate units of the grid coordinate system according to the specified proportion.
Context. scale (x, y)
The scale method accepts two parameters. X and y are the zooming factors of the horizontal and vertical axes respectively. They must both be positive values. If the value is smaller than 1.0, it means to zoom in. If the value is greater than 1.0, it means to zoom in. If the value is 1.0, there is no effect.
Because the pixel size remains unchanged, the actual effect of this change is that there are more or less items to be painted in the canvas of the same size.
The conversion example is as follows:
Function draw (){
Var ctx = document. getElementById ('leson01'). getContext ('2d ');
Ctx. lineWidth = 1.5;
Ctx. fillRect (300,300 );

Ctx. translate (150,150 );
Ctx. rotate (Math. PI/4 );
Ctx. scale (0.5, 0.5 );
Ctx. clearRect (-40,-40, 80, 80 );
}

Transformation Matrix: all transformations can be expressed in a matrix.
You can use the following two methods to directly set the transformation matrix:
Context. transform (m11, m12, m21, m22, dx, dy)
Context. setTransform (m11, m12, m21, m22, dx, dy)
The first method is to multiply the current deformation matrix by the upper and lower matrices (pay attention to the order of arrangement ):
M11 m21 dx
M12 m22 dy
0 0 1
The second method resets the current deformation matrix as the matrix, and then calls the transform method with the same parameters.
Function draw (){
Var canvas = document. getElementById ("lesson01 ");
Var ctx = canvas. getContext ("2d ");
 
Var sin = Math. sin (Math. PI/6 );
Var cos = Math. cos (Math. PI/6 );
Ctx. translate (200,200 );
Var c = 0;
For (var I = 0; I <= 12; I ++ ){
C = Math. floor (255/12 * I );
Ctx. fillStyle = "rgb (" + c + "," + c + "," + c + ")";
Ctx. fillRect (0, 0,100, 10 );
Ctx. transform (cos, sin,-sin, cos, 0, 0 );
}

Ctx. setTransform (-1, 0, 0, 1,200,200 );
Ctx. fillStyle = "rgba (255,128,255, 0.5 )";
Ctx. fillRect (0, 50,100,100 );
}

All transformations start with transformation matrices. Therefore, the translation, rotation, and scaling mentioned above can be replaced by the corresponding matrices. Students who are proficient in mathematics can deduce them by themselves:
Translation: context. translate (dx, dy) can be replaced by context. transform (, dx, dy) or context. transform (, 1, 0.dx, dy.
Rotation: context. rotate (θ) can use context. transform (Math. cos (θ * Math. PI/180), Math. sin (θ * Math. PI/180),-Math. sin (θ * Math. PI/180), Math. cos (θ * Math. PI/180),) or
Context. transform (-Math. sin (θ * Math. PI/180), Math. cos (θ * Math. PI/180), Math. cos (θ * Math. PI/180), Math. sin (θ * Math. PI/180),) instead.
Zoom: context. scale (sx, sy) can use context. transform (sx, 0, 0, sy, 0, 0) or context. transform (0, sy, sx, 0, 0, 0) instead.
Combination
By default, we always draw one image on the other, that is, the drawing result is subject to the order of the drawing. In most cases, this is not enough. Setting the composite attribute is to solve the effect of overlapping images. We use the globalCompositeOperation attribute to change the default practice.
GlobalCompositeOperation = type
Type is one of the following 12 string values:
• Source-over (default): This is the default setting. The new image will overwrite the original content.
• Source-in: new images only overlap with original content. Other regions are transparent.
• Ource-out: only the parts in the new image that do not overlap with the original content will be drawn.
• Source-atop: the overlapping parts of the new image and the original content will be drawn and overwrite the original content.
• Lighter: the overlapping parts of the two images are colored.
• Xor: overlapping parts become transparent.
• Destination-over: Creates a new image under the original content.
• Destination-in: the overlapping parts of the original content and the new image will be retained, and other areas will become transparent.
• Destination-out: the original content that does not overlap with the new image will be retained.
• Destination-atop: the overlapping parts of the original content will be retained and new images will be drawn under the original content.
• Darker: the overlapping parts of the two images are used for color reduction.
• Copy: only new images are retained, and others are cleared.
Suppose we first draw a blue rectangle and then draw a red circle, then apply the 12 combination settings as follows:

 

Note: If the set attribute value does not work, the current browser does not support this combination attribute value.
Crop
A problem related to the combination is cropping. In fact, when drawing the path, the last step is to draw the graph to the canvas function in addition to stroke and fill, there is also clip; when the path ends with clip, the currently drawn image is used as the cropping path. Only the image in the cropping path is displayed. The cropping path is part of the canvas status and can be saved. If you want to retain the original cropping path when creating a new cropping path, you need to save the canvas status.
For example, the following example is to first draw the background and crop path of the Mask layer, and then the drawn image is visible only in the crop path:
Function draw (){
Var ctx = document. getElementById ('leson01'). getContext ('2d ');
// Draw mask background
Ctx. fillRect (150,150 );
Ctx. translate (75, 75 );

// Create a circular clipping path
Ctx. beginPath ();
Ctx. arc (0, 0, 60, 0, Math. PI * 2, true );
Ctx. clip ();
 
// Draw background
Var lingrad = ctx. createLinearGradient (0,-75, 0, 75 );
Lingrad. addColorStop (0, '#232256 ');
Lingrad. addColorStop (1, '#143778 ');

Ctx. fillStyle = lingrad;
Ctx. fillRect (-75,-75,150,150 );
 
// Draw stars
For (var j = 1; j <50; j ++ ){
Ctx. save ();
Ctx. fillStyle = '# fff ';
Ctx. translate (75-Math.floor (Math. random () * 150 ),
75-Math.floor (Math. random () * 150 ));
DrawStar (ctx, Math. floor (Math. random () * 4) + 2 );
Ctx. restore ();
}
}
Function drawStar (ctx, r ){
Ctx. save ();
Ctx. beginPath ()
Ctx. moveTo (r, 0 );
For (var I = 0; I <9; I ++ ){
Ctx. rotate (Math. PI/5 );
If (I % 2 = 0 ){
Ctx. lineTo (r/0.525731) * 0.200811, 0 );
} Else {
Ctx. lineTo (r, 0 );
}
}
Ctx. closePath ();
Ctx. fill ();
Ctx. restore ();
}

 

From the autumn army