Canvas learning Summary 3: Draw a path-line segment and canvas Line Segment

Canvas learning Summary 3: Draw a path-line segment and canvas Line Segment

In the Canvas drawing environment, some are the method for drawing images immediately, and some are based on paths.

There are only two ways to draw a graph immediately: strokeRect () and fillRect (). Although strokezText () and fillText () are drawn immediately, the text is not a graph.

Path-Based Rendering System
Most rendering systems, such as SVG (Scalable Verctor Graphics, Scalable Vector Graphics) and Adobe Illustrator, are path-based,

When using these Drawing Systems, you must first define a path, and then draw or fill it. You can also add a stroke to fill the image to display it.

Three ways to draw a Canvas:

 

Draw a line segment

 

In the Canvas drawing environment, a line segment is also drawn based on a path, called a linear path. The method for creating a linear path is moveTO () and lineTo (). After creating a path, call the stroke () method, to draw a line segment in the Canvas.

This is the path-based rendering method we mentioned earlier. It must be stroke or filled;

It is usually very easy to draw a line segment when two points are connected to one line. You can use moveTO () to specify the starting point of the line and use lineTo () to move it to another point.

function drawLine(){    cxt.moveTo(50, 50);    cxt.lineTo(100, 100);}

However, we can't see the line segments in the canvas. As we mentioned above, the path-based rendering method must be stroke or fill. To see the results, we must also use the stroke () method.

Therefore, we modify the method to the following to draw a line segment.

function drawLine(){    cxt.moveTo(50, 50);    cxt.lineTo(200, 200);    cxt.stroke();}

We only use lineTo () to draw a line segment in the canvas. We changed the above Code to the one shown below, and the effect is the same.

function drawLine(){    cxt.lineTo(50, 50);    cxt.lineTo(200, 200);    cxt.stroke();}

Summarize the usage of moveTo () and lineTo ()

• MoveTo (x, y): Move the stroke to the specified coordinate x and y to add a path to the current path. This method does not clear any sub-paths in the current path.
• LineTo (x, y): draws a straight line from the current position to the specified x and y positions. If there is no sub-path in the current path, the behavior of this method is the same as that of moveTo. If a sub-path exists in the current path, this method adds the point you specified to the sub-path.

Change the line segment Style

Change the width of a line segment

 

function= 14;    cxt.lineTo(50, 50);    cxt.lineTo(200, 200);    cxt.stroke();}

 

Change the color of a line segment

function drawLine(){    cxt.lineWidth = 14;    cxt.strokeStyle = 'green';    cxt.lineTo(50, 50);    cxt.lineTo(200, 200);    cxt.stroke();}

 

We can also use the CanvasGradient object or CanvasPattern object to add gradient or pattern to the line segment.

function drawLine(){    cxt.lineWidth = 14;    var gradient = cxt.createLinearGradient(0, 0, canvas.width/2, canvas.height/2);    gradient.addColorStop(0, 'blue');    gradient.addColorStop(0.5, 'purple');    gradient.addColorStop(1, 'yellow');    cxt.strokeStyle = gradient;    cxt.lineTo(50, 50);    cxt.lineTo(200, 200);    cxt.stroke();}

 

BeginPath () and closePath ()

From the three painting methods in the canvas above, we can see that the arc path of the second row is an open path, and the arc of the last row is a closed path. How is the closed path implemented?

Next, let's take a look at two important methods of path rendering in the canvas.

• BeginPath (): clears all current sub-paths to reset the current path and re-plan a new path.
• ClosePath (): Used to close an open path for a specific segment. Not required. If the graph is closed, that is, the current vertex is the starting vertex, and the function does not do anything.

Draw a line first

function drawLine(){    cxt.strokeStyle = 'green';    cxt.lineWidth = 2;    cxt.moveTo(50, 50);    cxt.lineTo(50, 150);    cxt.lineTo(150, 150);    cxt.stroke();}

Modify the code in the preceding example and add the beginPath () and closePath () Methods to the code.

Function drawLine () {// stroke triangle cxt. strokeStyle = 'green'; cxt. lineWidth = 2; cxt. beginPath (); cxt. moveTo (50, 50); cxt. lineTo (50,150); cxt. stroke (); cxt. beginPath (); cxt. lineTo (150,150); cxt. lineTo (150,250); cxt. stroke ();
Cxt. closePath ();

}

We can see that two paths are drawn in the canvas.

Note: After beginPath () is called, or when canvas is just created, the first path construction command is generally considered as moveTo (). Therefore, we must first use beginPath () when drawing a graph ().

 

We continue to modify our code

Function drawLine () {// stroke triangle cxt. strokeStyle = 'green'; cxt. lineWidth = 2; cxt. beginPath (); cxt. moveTo (50, 50); cxt. lineTo (50,150); cxt. lineTo (150,150); cxt. closePath (); cxt. stroke (); // line cxt. translate (150, 0); cxt. strokeStyle = 'red'; cxt. lineWidth = 2; cxt. beginPath (); cxt. moveTo (50, 50); cxt. lineTo (50,150); cxt. lineTo (150,150); cxt. stroke (); cxt. closePath (); // green filled triangle cxt. translate (150, 0); cxt. fillStyle = 'green'; cxt. lineWidth = 2; cxt. beginPath (); cxt. moveTo (50, 50); cxt. lineTo (50,150); cxt. lineTo (150,150); cxt. fill (); cxt. closePath (); // red filled triangle cxt. translate (150, 0); cxt. fillStyle = 'red'; cxt. lineWidth = 2; cxt. beginPath (); cxt. moveTo (50, 50); cxt. lineTo (50,150); cxt. lineTo (150,150); cxt. closePath (); cxt. fill ();}

From the above example, we can see that the location of closePath () is different, which will also affect our graphics.

Note: When you call the fill () function, all shapes that are not closed are automatically closed. Therefore, the closePath () function is not required at this time.

But you call stroke (): If you only use closePath () before the stroke () method, it will form a closed path. If you call closePath () method after the stroke () method, at this time, the graph has been drawn and the current drawing path has been closed, so the closePath () method does not work.

 

Line Segment and pixel boundary

Let's look at an example.

Function drawLine () {// stroke triangle cxt. lineWidth = 1; cxt. beginPath (); cxt. moveTo (50, 50); cxt. lineTo (450, 50); cxt. stroke (); cxt. beginPath (); cxt. moveTo (50.5, 150.5); cxt. lineTo (450.5, 150.5); cxt. stroke ();}

 

We can see that the lineWidth of the two line segments is set to 1 pixel, but the above line segments draw two pixels.

 

If you draw a line segment with a width of 1 pixel at the boundary of two pixels, the line segment will actually occupy the width of two pixels;

Because when you draw a vertical line segment with a 1 pixel width at the pixel boundary, the canvas's drawing environment object will try to draw half a rectangle on the right of the boundary midline, draw the other half on the left of the midline boundary.

However, it is impossible to draw a half-pixel wide line segment within an entire pixel range, so the half-pixel in both left and right directions is expanded to one pixel.

 

On the other hand, it is drawn between two pixels, so that the half pixels at the left and right sides of the midline will not extend, and they combine to occupy exactly the width of one pixel. Therefore, to draw a line segment with a true width of 1 pixel, you must draw the line segment between two pixels.

 

Draw a grid

Now that we know how to draw a real line segment of 1 pixel, we can start to draw a grid.

Function drawLine (stepx, stepy) {cxt. lineWidth = 0.5; cxt. strokeStyle = 'green'; // draw a vertical line for (var I = stepx + 0.5; I <cxt. canvas. width; I + = stepx) {cxt. beginPath (); cxt. moveTo (I, 0); cxt. lineTo (I, cxt. canvas. height); cxt. stroke () ;}// draw a horizontal line for (var I = stepy + 0.5; I <cxt. canvas. height; I + = stepy) {cxt. beginPath (); cxt. moveTo (0, I); cxt. lineTo (cxt. canvas. width, I); cxt. stroke () ;}} drawLine (10, 10 );

In the above example, we plot a line segment between two pixels, And the drawn line segment is only 0.5 pixels wide,

Although the canvas specification does not provide clear text, the Canvas implementation of all browsers uses the "anti-aliasing" technology to create a "sub-pixel" line segment to draw results.

 

Summary

This section describes how to draw linear paths in a canvas. It mainly uses moveTo () to define the starting point, lineTo () to define the ending point, and stroke () to depict the current path. Draw line segments using these three methods

There are two important methods to draw a path in canvas: beginPath () and closePath (). Calling beginPath () before drawing a graph is necessary to draw multiple graphs.

ClosePath () can be omitted when fill () is used. Pay attention to the location where the closePath () method is called.

When drawing a line segment, we can use lineWidth to change the width of the line segment, and strokeStyle to change the color of the line segment.

We can figure out the pixel boundary of a line segment so that we can draw a line segment with a real line width of 1 pixel.