Canvas Summary: line width and pixel boundary

In the canvas, we often need to draw a line segment, mainly using the moveTo and lineto methods, moving moveTo to the starting point of the line segment, lineto draw the line segment to the end point. At the same time, you can specify the width of a line segment when creating a line segment. The linewidth attribute is used. The default value of linewidth is 1 and must be greater than 0.

MoveTo (x, y): Move to coordinates x, y

Lineto (x, y): coordinates of the end of a line segment X, Y

The simple code is as follows:

VaR context = document. getelementbyid ('canvas '). getcontext ('2d '); context. linewidth = 2; // set the linewidth context. beginpath (); // start to draw the context path. moveTo (0, 50); // move to the start point context. lineto (50, 50); // move to the endpoint context. stroke (); // draw

Done draws a line segment with a line width of 2, which is so simple.

Then we can draw a line segment with a line width of 1.

context.lineWidth = 1;context.beginPath();context.moveTo(50, 50);context.lineTo(100, 50);context.stroke();

How can I handle it? The width of line width 2 is the same as that of line width 2. The width is also 2, but the color is a little lighter.

Let's change the line of thought. The left side of the Y axis just drawn is 50. Let's change it to 50.5, and then draw two line lines with the line width of 2 and 1 respectively.

context.lineWidth = 2;context.beginPath();context.moveTo(0, 70.5);context.lineTo(50, 70.5);context.stroke();context.lineWidth = 1;context.beginPath();context.moveTo(0, 80.5);context.lineTo(50, 80.5);context.stroke();

Line Segments 1, 2, 4, and 3

Obviously, line 3 must be wider than 1 or 2, which is 3px and Line 4 is 1px.

Line Segment 1: Draw line width 2, actual width 2

Line Segment 2: Draw width 1, actual width 2

Line Segment 3: Draw width 2, actual width 3

Line Segment 4: Drawing width 1: actual width 1

Only 1 and 4 are the results we want.

Why?

In fact, this is related to the canvas painting logic. When we try to draw a line segment, the canvas will read linewidth, and then try to draw half of linewidth on each side of the coordinates. For example, we:

 

We draw a horizontal line with a width of 1 at coordinate 3, canvas will take 3 as the central axis, and draw 0.5 pixels on each side. The dark blue is our expected effect (2.5-3.5, 1 pixel), but in fact, the light blue will also be drawn, because the canvas cannot draw only half a pixel within the pixel width, therefore, both the upper and lower directions of the coordinate axis will be extended to the entire pixel width (2-4, two pixels), but the actual value of the extended pixel is not the same as the original value, but half of it, therefore, the most direct visual experience is that the line is wider than expected, but the color is much lighter.

 

Taking the horizontal line with the width of 1 as an example, if we plot it at the ordinate coordinate of 2.5, that is, using half pixel as the central axis

 

In the same way, the browser draws a 2.5 pixel width each up or down at 0.5. However, unlike the above example, the image boundary falls within the integer pixel boundary, the sum is exactly one pixel. In this case, we do not need to expand to either side, but the expected (2-3) width of one pixel.

Similarly, when we draw a line segment with a width of 2 in two ways, the effect is exactly the opposite. When we draw a line segment at coordinate 3, the pixel is scaled to 2-4, that is, two pixels, which meets our expectation. When we draw at coordinates 2.5, the pixels are extended to 1.5-3.5. If we do not reach the boundary, we need to fill up the number, and the number is changed to 1-4, that is, three pixels.

Suggestions

In practical applications, if you want a better experience, precise pixel values, and if the width of a line segment is an odd number of pixels, N.5 is used as the axis, that is, half of the pixels, if the width of a line segment is an even number of pixels, n.0 is used as the axis.