Shulou(Shulou.com)06/03 Report--

This article mainly shows you "what are the reasons for the blurring of 1-pixel lines in html5 Canvas", the content is simple and clear, and I hope it can help you solve your doubts. Let me lead you to study and learn "what are the reasons for blurring 1-pixel lines in html5 Canvas".

As we mentioned last time, canvas sometimes has blurred 1-pixel lines that seem to be wider, as shown in the following figure:

Such lines are obviously not what we want.

The purpose of this article is to find out the principle and solve it.

Everyone knows that the smallest display size on the screen is 1 pixel, although something less than 1 pixel may not be displayed, but the computer does not care, he will try to draw.

In fact, a pixel is a unit after all. What if we magnify the canvas big enough to see each pixel clearly? It looks something like this:

Each pixel has a range of start and end, as shown in the figure, from the left, across 1 pixel, to the right.

If we follow the starting and ending range of pixels when we draw a 1-pixel line, then we can certainly get a very standard thin line. As follows:

But unfortunately, the line drawing of canvas is different. As we said in the previous article, each line of canvas has an infinitely thin "center line", and the width of the line extends from the center line to both sides. If we still draw a line from the second pixel, then the center line of the line will be aligned to the starting point of the second pixel, and then we start to draw, and here comes the problem: the Canvas line extends to both sides with the center line, rather than to one side (for example, here, if it just extends to the right, then our problem is no longer a problem), and after the extension, our line actually looks like this:

At this point, there is another problem: the computer does not allow graphics smaller than 1px, so he makes a compromise: draw both pixels.

So, in this way, the original 1px line becomes the line that looks like 2px wide.

The reason for the failure is found: the line in Canvas aligns the center line with the starting point of the pixel, not the middle point of the pixel.

So how do we solve the problem of egg pain? Maybe some people have thought of it: since it is because the two have different starting points, let's make their starting points the same.

Let's just align the center line of the line with the middle point of the pixel.

The middle point of the pixel is easy to find, for example, the middle point of the second pixel is 1.5 pixels according to the interpretation on the picture, then the middle point of the x pixel is (Xmi 0.5) px.

Of course, in less rigorous situations, it is OK for you to use xbirthday 0.5.

Now let's try our findings on canvas.

The code is as follows:

Ctx.moveTo (100.5100.5)

Ctx.lineTo (200.5100.5)

Ctx.lineTo (200.5200.5)

Ctx.lineTo (100.5200.5)

Ctx.lineTo (100.5100.5)

Ctx.closePath ()

Ctx.lineWidth = 1

Ctx.strokeStyle = 'rgba (255pc0pm 0pr 0pr 0.5)'

Ctx.stroke ()

Does it look right?

But it seems that when we draw lines in this way, we are very tangled. Do we always add this depressing 0.5 every time? Of course not, because we use variables to store values most of the time, so we don't have to add 0.5 to each value.

Also, for lines with lineWidth > 1, we don't have to worry about it: this problem is most obvious only when the line width is 1px.

These are all the contents of this article entitled "what are the reasons for the blurring of 1-pixel lines in html5 Canvas?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.