Comments: The last time we talked about canvas, sometimes the lines in one pixel are blurred and seem to be wider. Such lines are obviously not what we want. The purpose of this article is to find out the principle and solve it. If you are interested, you can take a line painting tutorial on canvas.
The last time we talked about canvas, sometimes one pixel lines may be blurred and seem wider, for example:
This line is obviously not what we want.
The purpose of this article is to clarify the principles and solve them.
Everyone knows that the minimum display size on the screen is 1 pixel. Although something smaller than 1 pixel may not be displayed, the computer will try to draw it.
In fact, pixels are also a unit after all. What would happen if we enlarged the canvas to a large enough size to clearly view each pixel? It looks like this:
Each pixel has a starting and ending range. Their range ranges from left to 1 pixel and ends at right.
If we follow the starting and ending ranges of pixels when drawing a line of 1 pixel, we will surely get a very standard line. As follows:
Unfortunately, canvas's line drawing method is different. As we mentioned in the previous article, each line of canvas has an infinitely fine "midline ", the width of a line is extended from the midline to both sides. If we still draw a line from 2nd pixels, the midline of the line will be aligned to the starting point of 2nd pixels, and then we start to draw the line. The problem is as follows: canvas lines extend to both sides in the midline rather than to one side (for example, if we only extend to the right side, then our problem is no longer a problem ), after the extension, our line is actually like this:
Now there is another problem: the computer does not allow images smaller than 1px, so he made a compromise: he drew both pixels.
Therefore, the 1px line is a line that looks 2px wide.
Cause of failure: line in the Canvas alignment the midline with the starting point of the pixel, rather than the middle point of the pixel.
So how can we solve this problem? Maybe someone has already thought of it: since the two start points are different, let's make their start points the same!
Let's align the midline of the line with the middle point of the pixel!
The middle point of the pixel is very easy to find, such as the middle point of 2nd pixels, according to the graph interpretation is the location of 1.5 pixels, then the middle point of x pixel is (x-0.5) px.
Of course, in less rigorous scenarios, you can use x + 0.5.
Now let's try our research results on canvas.
The Code is as follows:
Ctx. moveTo (100.5, 100.5 );
Ctx. lineTo (200.5, 100.5 );
Ctx. lineTo (200.5, 200.5 );
Ctx. lineTo (100.5, 200.5 );
Ctx. lineTo (100.5, 100.5 );
Ctx. closePath ();
Ctx. lineWidth = 1;
Ctx. strokeStyle = 'rgba (255,0, 0, 0.5 )';
Ctx. stroke ();
Does it look right?
However, it seems that we are very entangled when we draw a line. Do we need to add this depressing 0.5 every time? Of course not, because most of the time we use variables to save the value, we don't need to add 0.5 to each value.
We don't need to worry about lineWidth> 1, because this problem is most obvious only when the lineWidth is 1 px.
