Continue to explore the canvas path after learning HTML5 with kingdz

Haha, let's get started. The first content in this lesson is path. Path, as its name implies, is to draw a line with a paint brush.

Steps for drawing.

Step 1: Find a starting point to start drawing. ---- Beginpath;

Step 2: dashes and draw the desired image.

Step 3: complete the graph and disable the path. You can also do nothing, that is, draw a point or line ----- closepath

Step 4: Fill in the color.

Haha, right? That's how art teachers teach me in elementary school.

Well, draw a picture first. --- Draw a line (* ^__ ^ ......

<ScriptType= "Text/JavaScript"> FunctionDraw (){VaRC = Document. getelementbyid ("Mycanvas");VaRCxt = C. getcontext ("2D"); Cxt. beginpath (); cxt. moveTo (10, 10); cxt. lineto (100, 10); cxt. Stroke ();}</Script>
 

Okay. We have finished drawing a line. Let's just say it.

MoveTo is a very useful method, which is part of a practical method for drawing paths.

You can think of it as a process of bringing a pen up and moving from one point to another.

Of course lineto is underlined.

The two parameters in brackets are equivalent to coordinates.

Last step,

Call the stroke or fill method.

The image is actually drawn to the canvas.

Stroke is the border for drawing the image, and fill will fill out a solid image. When fill is called, open paths are automatically closed without calling closepath.

Okay. With the above two sentences, let's draw an equi-side right triangle.

<ScriptType= "Text/JavaScript"> FunctionDraw (){VaRC = Document. getelementbyid ("Mycanvas");VaRCxt = C. getcontext ("2D"); Cxt. beginpath (); cxt. moveTo (10, 10); cxt. lineto (100, 10); cxt. lineto (100,100); cxt. Fill ();}</Script>
 

Of course, you have to use stroke () in the end.

FunctionDraw (){VaRC = Document. getelementbyid ("Mycanvas");VaRCxt = C. getcontext ("2D"); Cxt. beginpath (); cxt. moveTo (10, 10); cxt. lineto (100, 10); cxt. lineto (100,100); cxt. lineto (10, 10); cxt. stroke ();}
 

Haha, no fun ????

Next, let's continue and draw a circle below.

The arc method is used to draw an arc or circle.

Arc(X, y, radius, startangle, endangle, anticlockwise)

Arc(X, y, radius, startangle, endangle, anticlockwise)

This method accepts five parameters:

1. X and Y are the coordinates of the center;

2. radius indicates the radius;

3. startangle is a radian (based on the X axis );

4. endangle is the last radian (based on the X axis );

5. If the value of anticlockwise is true, it indicates the clockwise direction.

Okay, work reserves are ready. Continue,

 
FunctionDraw (){VaRC = Document. getelementbyid ("Mycanvas");VaRCxt = C. getcontext ("2D"); Cxt. fillstyle ="#596"; Cxt. beginpath (); cxt. ARC (150,150,150, 0, math. Pi * 2,True); Cxt. closepath (); cxt. Fill ();}
 

Draw a big circle.

Note:

The angle used in the arc method is in radians rather than degrees.

You can use this expression to directly convert degrees and radians: var radians = (math. PI/180) * angle ;. JavaScript does not support Chinese characters. It is easy to understand.

Of course, you can draw some arcs. For example

CodeAs follows:

FunctionDraw (){VaRC = Document. getelementbyid ("Mycanvas");VaRCxt = C. getcontext ("2D"); Cxt. fillstyle ="#596"; Cxt. beginpath (); cxt. ARC (150,150,150, 1, math. Pi * 1.5,True); Cxt. Stroke () ;}below, we are implementing a table similar to mine clearance.
 

 
This is actually two cycles,
 

     <  Script  Type  = "Text/JavaScript"> Function Draw (){ VaR C = Document. getelementbyid ( "Mycanvas" ); VaR Cxt = C. getcontext ( "2D" ); Cxt. beginpath (); For ( VaR X = 0.5; x <200; x + = 10) {cxt. moveTo (x, 0); cxt. lineto (x, 200 );} For ( VaR Y = 0.5; y <200; y + = 10) {cxt. moveTo (0, Y); cxt. lineto (200, Y);} cxt. strokestyle = "# Ff0000" ; Cxt. Stroke ();}</  Script  > 

Now, the task is finished.