Detailed explanation of endpoints and connection points of line segments in canvas

In Canvas, line segments are also a type of path and are called linear paths. Drawing linear paths in Canvas mainly uses the moveTo(x,y), lineTo(x,y) and stroke() methods. Let us recall the usage of line width.

function drawLine(){
    cxt.lineWidth = 3;
    cxt.moveTo(10, 10);
    cxt.lineTo(120, 100);
    cxt.stroke();
}

With the above code we can draw a line segment with a width of 3 pixels.

In the previous chapter, we also mentioned the main content of line width and pixel boundaries:
If you draw a line at the boundary of a certain two pixels 1 pixel wide line segment, then the line segment will actually occupy a width of 2 pixels;

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

However, it is impossible to draw a half-pixel wide line segment within a whole pixel range, so half a pixel in both directions is expanded to 1 pixels. (For specific content, please refer to Chapter 3);

In today’s chapter we will use it to look at other attributes of line segments, lineCap and lineJoin.

Endpoint of line segment (lineCap)

When drawing a line segment, you can control the endpoint of the line segment, which is the "lineCap" (lineCap) ), in the Canvas drawing environment object, the property that controls the endpoints of the line segment is also called lineCap.
The style of the endpoint of the line segment has three values, namely butt, roundm, and square. The default is butt; both round and square will draw a hat on the endpoint of the line segment.

• butt: The default style for the endpoints of the line segment

• round: Add a A semicircle whose radius is half the linewidth.

• #square: Add a rectangle at the endpoint, the length is consistent with the line width, and the width is half the line width.

#It seems that we can’t see anything interesting here. Then let's draw it first, and you will understand it instantly. Otherwise, everyone talks about data visualization!

function lineCap(){
    cxt.lineWidth = 20;
    cxt.strokeStyle = '#16a085';

    cxt.beginPath();
    cxt.lineCap = 'butt';
    cxt.moveTo(20, 20);
    cxt.lineTo(300, 20);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineCap = 'round';
    cxt.moveTo(20, 100);
    cxt.lineTo(300, 100);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineCap = 'square';
    cxt.moveTo(20, 180);
    cxt.lineTo(300, 180);
    cxt.stroke();
}

See above Do you instantly know the style of the lineCap attribute value in the picture, and do you also feel the charm of visualization?

The connection point of the line segment (lineJoin)

In When drawing a line segment or rectangle, we can control the inflection point at the connection of two line segments, which is the connection point of the line segments.
In the canvas drawing environment, the connection points of line segments are controlled by the lineJoin attribute.
The lineJoin attribute also has three values: round, bevel, miter. The default is miter.

• round: Fill in an additional arc. The arc is formed by connecting the outer edge points of the corners of two line segments with arcs.

• bevel: Fill in an additional triangle. The triangle is formed by connecting the outer edge points of the corners of two line segments with a straight line.

• miter: Fill an additional polygon, which is formed by the intersection of the extension lines of the outer edges of the corners of the two line segments.

Let’s draw it and take a look

function lineCap(){
    cxt.lineWidth = 20;
    cxt.strokeStyle = '#16a085';

    cxt.beginPath();
    cxt.lineJoin = 'round';
    cxt.moveTo(20, 20);
    cxt.lineTo(300, 20);
    cxt.lineTo(300, 60);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineJoin = 'bevel';
    cxt.moveTo(20, 100);
    cxt.lineTo(300, 100);
    cxt.lineTo(300, 140);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineJoin = 'miter';
    cxt.moveTo(20, 180);
    cxt.lineTo(300, 180);
    cxt.lineTo(300, 220);
    cxt.stroke();
}

Let’s take a look at the specific construction method of line segment connection points

## Tips

When we use the miter style to draw the connection of line segments When clicking, we can also specify a miterLimit attribute
miterLimit: represents the ratio of the length of the miter line (miter) to half the line width;

The measurement method of oblique line is as follows

## From the figure we can see that if the angle between two line segments If it is very small, the length of the miter line may become very long, and its ratio to half the line width will exceed the miterLimit attribute value you specify,

At this time, the browser will draw the connection points of the line segments in a bevel manner.

Summary##Related properties of line segments in the Canvas drawing environment

PropertiesDescriptionValueDefault valuelineWidth lineCaplineJoin##miterLimit

Line segment width in pixels	Non-zero positive number	1
Endpoint style for drawing line segments	butt, round , square	butt
line segment connection point Style	bevel, round, miter	miter
The ratio of the diagonal line to one-half line width	A non-zero positive number	10

The above is the detailed content of Detailed explanation of endpoints and connection points of line segments in canvas. For more information, please follow other related articles on the PHP Chinese website!