Canvas Learning Summary Three: Drawing Paths - Line Segments

Some drawing methods in the Canvas drawing environment are immediate drawing methods, and some drawing methods are path-based.

There are only two methods for drawing graphics immediately: strokeRect() and fillRect(). Although the strokezText() and fillText() methods are also drawn immediately, text is not considered a graphic.

Most drawing systems, such as: SVG (Scalable Verctor Graphics, scalable vector graphics), Adobe Illustrator, etc., are based on paths.

When using these drawing systems, you need to define a path first, and then stroke or fill it, or you can stroke and fill it so that the shape can be displayed.

Three drawing methods in Canvas:

In the Canvas drawing environment, line segments are also drawn based on paths, called linear paths. The methods to create linear paths are: moveTO() and lineTo(). Only by calling the stroke() method after creating the path can the line segments be drawn in Canvas.

This is the path-based drawing method we mentioned earlier, which must be stroked or filled;

Usually two points are connected by a line, so drawing a line segment is very simple. Specify the starting point of the line through moveTO(), and move to another point through lineTo().

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

However, we cannot see the line segments in the canvas. Earlier we mentioned that the path-based drawing method must be stroked or filled. So to see the result, we must also use the stroke() method.

So we modify the method to the following so that a line segment will be drawn

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

We can also draw line segments in the canvas using only lineTo(). We change the above code to as 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 coordinates x and y, adding a subpath to the current path. This method will not clear any subpaths in the current path.
• lineTo(x,y): Draw a straight line from the current position to the specified x and y position. If there are no subpaths in the current path, then this method behaves the same as moveTo(). If there is a subpath in the current path, this method will add the point you specify to the subpath.

Change the width of a line segment

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

 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 colors or patterns to line segments.

 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();}

From the three drawing methods in the canvas above, we can see that the arc path in the second row is an open path, and the arc path in the last row is a closed path. So how is a closed path achieved?

Let's take a look at two of the more important methods of path drawing in canvas.

• beginPath(): Clear all current sub-paths to reset the current path and re-plan a path.
• closePath(): used to close an open path. It is not necessary. If the graph is already closed, that is, the current point is the starting point, this function does nothing.

First draw a polyline

 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 above example and add 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();}

It can be seen that we have drawn two paths in the canvas

Note: After calling beginPath(), or when the canvas is first created, the first path construction command is usually regarded as moveTo(). So we must use beginPath() first when drawing graphics.

Let’s continue modifying 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(); //Polyline 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 different positions of closePath() will also affect our graphics.

Note: When you call the fill() function, all unclosed shapes will be automatically closed, so the closePath() function is not necessary at this time.

But calling stroke(): If you only use closePath() before the stroke() method, a closed path will be formed. If you call the closePath() method after the stroke() method, the graphics has been drawn and the current drawing path has been closed. , so the closePath() method does not work.

Let’s look at an example first

 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 from the picture that we set the lineWidth of both line segments to 1 pixel, but the line segment above draws two pixels.

If you draw a 1-pixel-wide line segment at the boundary of a certain 2 pixels, the line segment will actually occupy 2 pixels wide;

Because when you draw a 1-pixel-wide vertical line segment at a pixel border, the canvas drawing environment object will try to draw half a pixel to the right of the border center line, and the other half pixel to the left of the border center line.

However, it is not possible to draw a line segment half a pixel wide within a full pixel, so half a pixel in both directions is expanded to 1 pixel.

On the other hand, drawing is between two pixels, so that the half pixels on the left and right sides of the center line will not extend, and they combined will occupy exactly the width of 1 pixel. So, if you want to draw a line segment that is truly 1 pixel wide, you must draw the line segment between two pixels

Now that we understand how to draw a true 1-pixel line segment, let's start drawing the 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 draw the line segment on the pixel between two pixels, and the drawn line segment is only 0.5 pixels wide.

Although the canvas specification does not explicitly stipulate it, all browser Canvas implementations use anti-aliasing technology to create sub-pixel line segment drawing effects.

This section mainly explains the method of drawing linear paths in canvas. It mainly uses moveTo() to define the starting point, lineTo() to define the end point, and stroke() to draw the current path. These three methods draw line segments

There are two important methods for drawing paths in canvas, beginPath() and closePath(). Calling beginPath() before drawing graphics is a necessary step for drawing multiple graphics.

closePath() can be omitted when using fill(), and you must also pay attention to the calling position of the closePath() method.

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.

Figure out the pixel boundaries of the line segment so we can draw a true 1 pixel line width.

Students who are interested in drawing graphics on canvas, please continue to pay attention to subsequent updates. If there is something wrong, please point it out and communicate more.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.