How to solve the inconsistency of border style when HTML5 canvas draws rectangles?

Most people do not understand the knowledge points of this article, "HTML5 canvas painting rectangle appears when the frame style is inconsistent, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this article," HTML5 canvas painting rectangle appears when the frame style is inconsistent how to solve the article.

First attach the code for HTML5 to draw a rectangle:

Copy the code

The code is as follows:

Varcanvas=document.getElementById ('myCanvas')

Varcontext=canvas.getContext ('2d')

Context.beginPath ()

Context.rect (188.0pm 50200100.375)

Context.fillStyle='white'

Context.fill ()

Context.lineWidth=1

Context.strokeStyle='red'

Context.stroke ()

You will find that the style of the rear border is different, and the bottom is obviously very thin. The color is also slightly different.

After modifying context.rect (188.050200100.375) to context.rect (188.050200100), it is found that the style is exactly the same.

This shows that when drawing a rectangle, if the parameters inside are not integers, it is easy to lead to border problems, so it is recommended that you take the whole and then use it.

The above is about the content of this article on "how to solve the inconsistent border style when HTML5 canvas draws rectangles". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.