Canvas BASICS (2) canvas Basics

Canvas BASICS (2) canvas Basics

Html section:

<Canvas id = "myCanvas" width = "800" height = "800"> </canvas>

Part 1 save and restore the drawing status
In the canvas, the drawing State refers to the complete set of attributes that describe the 2D rendering context appearance at a specific time point, from simple color values to complex transformation matrices and other features
Note: The current path and the current Bitmap (displayed content) on the canvas are not in the status.
1. save the drawing status: save ();
2. restore the drawing status: restore ();

<Script type = "text/javascript"> function draw1 (id) {var canvas = document. getElementById (id); var context = canvas. getContext ("2d"); var text = "hello world! "; Context. font = "30px serif" // set the text size to 30px context. fillStyle = "red"; // set the text color to red context. fillText (text, 40, 40); // red text context. save (); // save the canvas state (save the red state of the text) context. fillStyle = "yellow"; // set the text color to yellow context. fillText (text, 40, 80); // The Yellow text context. save (); // save the canvas state (save the yellow state of the text) context. restore (); // restore the canvas status context. fillText (text, 40,120); // The Yellow text context. restore (); context. fillText (text, 40,160); // red text} draw1 ('mycanvas '); </script>

 

Summary:
When the save method is called to save the drawing status, a drawing state stack is saved in the 2D rendering context, and the last saved State is at the top, the first drawing state to be restored by calling the restore method is retrieved from the top of the stack. When the stack returns to the last state, it is cleared to make the stack empty.

In the previous example, the last one stored in the stack is yellow. Therefore, the text displayed when the restore method is called for the first time is yellow rather than red. The red text is displayed only when the restore method is called for the second time.

Part 2 Deformation
Note: Each deformation method, including translation, affects all elements drawn after the method is executed, because they are directly performed in the 2D rendering context, rather than for the drawn image.

1. translate (x, y)
X and y are coordinate values.
It moves the origin of the 2D rendering context, rather than the drawn object, such:

Instance:

<Script type = "text/javascript"> function draw1 (id) {var canvas = document. getElementById (id); var context = canvas. getContext ("2d"); context. fillRect (10, 10, 50, 50); context. translate (60, 60); // The origin coordinate from (10, 10) to (60, 60) the position context. fillStyle = "red"; context. fillRect (10, 10, 50, 50); // After moving, the coordinates of the origin are changed from (10, 10) to (70, 70)} draw1 ('mycanvas '); </script>

2. scale (x, y)
X and y are scaling multiples, not pixel values.
Scaling is to adjust the size of the 2D context.

<Script type = "text/javascript"> function draw1 (id) {var canvas = document. getElementById (id); var context = canvas. getContext ("2d"); context. fillRect (10, 10, 50, 50); context. scale (2, 2); // x and y are magnified by 2 times of context. fillStyle = "red"; context. fillRect (10, 10, 50, 50); // After amplification} draw1 ('mycanvas '); </script>

 

In the above example, the x and y directions of the 2D rendering context are multiplied by 2, so the 2D rendering context and all the objects it draws are changed to two times the size.
3. rotate ()
You need to input a 2D rendering context rotation angle value in radians.

Instance:

<Script type = "text/javascript"> function draw1 (id) {var canvas = document. getElementById (id); var context = canvas. getContext ("2d"); context. rotate (0.7854); // rotate the 2D rendering context 45 ° (Math. PI/4) context. fillStyle = "red"; context. fillRect (90, 90, 50, 50); // The image appears in a strange area after the canvas is rotated} draw1 ('mycanvas '); </script>

　　

Rotate () rotates the 2D rendering context around its origin (0, 0), and the image itself does not rotate, such:

If you only want to rotate the image to be drawn, you also need to work with tranlate to translate the origin of the 2D rendering context to the drawing center, and then perform a rotation on the canvas, then draw the image at the current position,
For example:

<Script type = "text/javascript"> function draw1 (id) {var canvas = document. getElementById (id); var context = canvas. getContext ("2d"); context. translate (400,400); // translate to the center context. rotate (0.7854); // rotate the 2D rendering context 45 ° (Math. PI/4) context. fillStyle = "red"; context. fillRect (90, 90, 50, 50); // draw a drawing after rotating the canvas} draw1 ('mycanvas '); </script>

Part 3 Synthesis
Synthesize multiple visualization elements into one visualization Element
1. Global Alpha value globalAlpha
Value: 0.0 (fully transparent )~ Between 1.0 (not transparent)
Default Value: 1.0
Affects the transparency of the objects to be drawn.

<script type="text/javascript">    function draw1(id){        var canvas = document.getElementById(id);        var context =canvas.getContext("2d");        context.fillStyle = "red";        context.fillRect(90,90,50,50);        context.globalAlpha = 0.2;        context.fillRect(150,150,50,50);    }draw1('myCanvas'); </script>

2. Merging globalCompositionPeration
Source: New Drawing
Objective: To view the 2D rendering context of a drawing
1) source-over (default attribute) source on the target
2) destination-over the source is under the target
3) The source-atop source is on top of the target, but the overlapping areas are not transparent. The target drawn in other locations is not transparent, and the source is transparent (invisible)
4) the destination-atop source is under the target, but the overlapping regions are not transparent. The source drawn in other locations is not transparent, and the target is transparent (invisible)
5) The overlapping parts of the source-in source and target are only the source and non-overlapping parts are transparent.
6) The overlapping parts of destination-in source and target only draw the target, and the non-overlapping parts become transparent.
7) source-out is used to draw the source from a region that does not overlap with the target. Other parts are transparent.
8) Draw the target in a region with no overlap between the destination-out and the target, and make the other part transparent.
9) lighter is irrelevant to the sequence. If the source and target overlap, the color values of the two are added. The maximum value of the color value is 255, and the result is white.
10) copy is irrelevant to the sequence. Only the source is drawn and the target is overwritten.
11) xor is irrelevant to sequence. Only overlapping areas are drawn and transparent.

<Script type = "text/javascript"> function draw1 (id) {var canvas = document. getElementById (id); var context = canvas. getContext ("2d"); context. fillStyle = "rgb (63,169,245)"; // target context. fillRect (90,90, 150,150); context. globalCompositeOperation = "source-over"; context. fillStyle = "rgb (225,123,172)"; // source context. fillRect (150,150,150,150);} draw1 ('mycanvas '); </script>

 

Part 4 shadow
ShadowBlur Fuzzy Value
ShadowOffsetX x-axis direction shadow offset
ShadowOffsetY Y-axis shadow offset
ShadowColor

<Script type = "text/javascript"> function draw1 (id) {var canvas = document. getElementById (id); var context = canvas. getContext ("2d"); context. shadowBlur = 20; // 20 PX Fuzzy Value context. shadowColor = "red"; // fuzzy color context. shadowOffsetX = 10; context. shadowOffsetY = 10; context. fillRect (150,150,);} draw1 ('mycanvas '); </script>

　　

Part 5 gradient
1. Linear Gradient createLinearGradient (x0, y0, x1, y1)
Parameter: gradient start point x and y coordinates
Gradient end point x, y coordinate
2. Radiation gradient createRadialGradient (x0, y0, r0, x1, y1, r1)
Parameter: Start circle of the first three descriptions
The last three descriptions end the circle
The (x, y) of each circle represents the coordinates of the center, and r represents the radius.
The gradient effect is achieved by connecting the vertebral bodies in two circles. The section before the circle starts displays the color with the offset of 0, and the section after the circle ends displays the color value with the offset of 1.
Note: In order to achieve the best effect, the starting and ending circles are placed in the same position.
Return: CanvasGradient object
Add color: addColorStop ()
Parameter: Color Offset Value (0: gradient start point; 1: gradient end point)
Offset color value
Both fillStyle and storeStyle can accept the gradient color value represented by the CanvasGradient object.
Example 1: Linear Gradient

<Script type = "text/javascript"> function draw1 (id) {var canvas = document. getElementById (id); var context = canvas. getContext ("2d"); var gradient = context. createLinearGradient (0,800, 0,800); // gradient area: the gradient starts from the upper left corner () to the lower left corner. addColorStop (0, 'Blue '); gradient. addColorStop (1, 'yellow'); context. fillStyle = gradient; context. fillRect (800,800,);} draw1 ('mycanvas '); </script>

 

Example 2: radiation gradient

<Script type = "text/javascript"> function draw1 (id) {var canvas = document. getElementById (id); var context = canvas. getContext ("2d"); var gradient = context. createRadialGradient (500,500,100,500,500,500); // place the start and end circles in the same position as gradient for the best effect. addColorStop (0, 'Blue '); gradient. addColorStop (1, 'yellow'); context. fillStyle = gradient; context. fillRect (800,800,);} draw1 ('mycanvas '); </script>

　　

Part 6 complex paths
How to link multiple paths together?
Constantly calling lineTo ();
MoveTo creates a new sub-path.
LineTo only draws lines along an existing sub-Path

<script type="text/javascript">    function draw1(id){        var canvas = document.getElementById(id);        var context =canvas.getContext("2d");        context.beginPath();        context.moveTo(100,50);        context.lineTo(30,150);        context.lineTo(160,150);        context.closePath();        context.stroke();        context.fill();    }draw1('myCanvas'); </script>

　　

2. besell Curve
QuadraticCurveTo ()
Parameters:
Coordinate of the Control Point (x, y)
(X, y) coordinate of the path target point
There is only one control point in the secondary besell curve (only one bend in the line)
BezierCurveTo ()
Parameters:
Coordinates of the first control point (x, y)
Coordinates of the second Control Point (x, y)
Coordinates of the path target point (x, y)
Three-time besell curve, two control points (bending twice)
Instance: Secondary

<script type="text/javascript">    function draw1(id){        var canvas = document.getElementById(id);        var context =canvas.getContext("2d");        context.lineWidth=5;        context.beginPath();        context.moveTo(50,250);        context.quadraticCurveTo(250,100,450,250);        context.stroke();    }draw1('myCanvas'); </script>

　　

Instance: three times

<script type="text/javascript">    function draw1(id){        var canvas = document.getElementById(id);        var context =canvas.getContext("2d");        context.lineWidth=5;        context.beginPath();        context.moveTo(50,250);        context.bezierCurveTo(150,50,350,450,450,250);        context.stroke();    }draw1('myCanvas'); </script>

　　

The above are the notes made during study. If you have any questions, please correct them. Thank you very much!

References <HTML5 CANVAS basic tutorial>