HTML5 learning: canvas API

In the previous article, I learned some basic principles of canvas painting by drawing diagonal lines. Now you can use the HTML5 canvas API to create a scenario: a forest with a long-distance runway.
 
Outline
Use the canvas API to create a tree canopy
Bold and fill the canopy color with the edge frame of the canopy
Create a powerful trunk for the canopy
Draw Runway
Use the canvas API to create a tree canopy
The principle is the same as the diagonal line of the previous article, but the steps are increased. first look at the Code:
 
 
 
<Script type = "text/javascript">
Function createCanopyPath (context ){
Context. beginPath ();

Context. moveTo (-25,-50 );
Context. lineTo (-10,-80 );
Context. lineTo (-20,-80 );
Context. lineTo (-5,-110 );
Context. lineTo (-15,-110 );
 
Context. lineTo (0,-140 );
 
Context. lineTo (15,-110 );
Context. lineTo (5,-110 );
Context. lineTo (20,-80 );
Context. lineTo (10,-80 );
Context. lineTo (25,-50 );
 
Context. closePath ();
}
 
Function drawTrails (){
Var canvas = document. getElementById ('diagonal ');
Var context = canvas. getContext ('2d ');

Context. save ();
Context. translate (130,250 );

CreateCanopyPath (context );
Context. stroke ();
Context. restore ();
}
Window. addEventListener ("load", drawTrails, true );
</Script>
 
The DEMO effect is as follows:
 
 
The code above has a special function called closePath. The behavior of this function is similar to lineTo. The only difference is that closePath automatically takes the starting coordinate of the path as the target coordinate. ClosePath also notifies the canvas that the currently drawn image has been closed or formed a completely closed area.
 
 
 
Bold and fill the canopy color with the edge frame of the canopy
In order to make the canopy more image and look like a real tree, you have to use the canvas API to draw its image appearance. The Code is as follows:
 
 
 
Function drawTrails (){
 
Var canvas = document. getElementById ('diagonal ');
Var context = canvas. getContext ('2d ');

Context. save ();
Context. translate (130,250 );

CreateCanopyPath (context );
// Widen the line
Context. lineWidth = 4;
// The joining Point of the smooth path
Context. lineJoin = 'round ';
// Change the color to Brown.
Context. strokeStyle = '#663300 ';

// Set the fill color to green and fill the canopy
Context. fillStyle = '#339900 ';
Context. fill ();

Context. stroke ();
Context. restore ();
}
 
 
 
For the DEMO effect, see the following running effect:
 
 
The lineJoin attribute is set to round, which is used to modify the connection mode of a line segment in the current shape to make the corner more oily. You can also set the lineJoin attribute to bevel or miter to change the corner style.
 
The strokeStyle attribute is used to change the line color.
 
The fillStyle attribute is used to set the fill color.
 
The fill function of context is used to fill the pixels in all closed paths in the current graph with fillStyle to fill the internal image color.
 
 
 
Create a powerful trunk for the canopy
There are two ways to create a trunk:
 
 
Use the lines we learned above to draw the trunk with closePath
HTML5 provides a powerful function to fill a rectangle. fillRect can draw a rectangle on the X axis, Y axis, and width and height.
 
 
Here we use fillRect to build the trunk. The Code is as follows:
 
 
 
Context. fillStyle = '#663300 ';
Context. fillRect (-5,-50, 10, 50 );
 
 
 
The DEMO is as follows:
Www.2cto.com: the author's image is invalid.
 
 
Functions related to fillRect include strokeRect and clearRect. StrokeRect is used to draw the contour of a rectangle Based on the given position and coordinates. clearRect is used to clear all content in the rectangle area and restore it to its initial state, that is, transparency.
 
 
 
 
 
Draw Runway
Complete the last function in this article and draw a runway next to the small tree. The Code is as follows:
 
Function drawTrails (){
Var canvas = document. getElementById ('diagonal ');
Var context = canvas. getContext ('2d ');

Context. save ();
Context. translate (130,250 );

CreateCanopyPath (context );
// Widen the line
Context. lineWidth = 4;
// The joining Point of the smooth path
Context. lineJoin = 'round ';
// Change the color to Brown.
Context. strokeStyle = '#663300 ';

// Set the fill color to green and fill the canopy
Context. fillStyle = '#339900 ';
Context. fill ();

Context. fillStyle = '#663300 ';
Context. fillRect (-5,-50, 10, 50 );

Context. stroke ();
Context. restore ();
 
Context. save ();
Context. translate (-10,350 );
Context. beginPath ();
Context. moveTo (0, 0 );
// Bend the first curve to the top right
Context. quadraticCurveTo (170,-50,260,-190 );
// Bend the second curve to the lower right
Context. quadraticCurveTo (310,-250,410,-250 );
Context. strokeStyle = '#663300 ';
Context. lineWidth = 20;
Context. stroke ();
Context. restore ();
}
 
The start point of the curve drawn by the quadraticCurveTo function is the current coordinate, with two sets of (x, y) parameters. The second group refers to the end point of the curve. The first group represents the control point. The so-called control point is located next to the curve, which is equivalent to generating a tension on the curve. The curvature of the curve can be changed by the position of the High-Speed Control Point. Draw another curve in the upper right to form a path. The DEMO effect is as follows:
 
 
Like the quadraticCureTo function, curve functions include bezierCurveTo, arcTo, and arc functions. These functions make curves more plasticity through multiple control points (such as radius, angle, and so on.
 
 
 
Reference: pro HTML5 Programming.
 

By Terry _ Dragon