HTML5 painting finds that the border drawn by the function that draws a rectangle has a style inconsistency problem. The following describes how to solve the problem, if you are interested, do not miss out on the things that require your colleagues to draw HTML5 images over the past two days. You may find that the border drawn by the function of the rectangle has different styles, finally, I found the crux of the problem through some exclusion methods. I will share it with you.
First, the code for drawing a rectangle in HTML5 is attached:
The Code is as follows:
Script
Var canvas = document. getElementById ('mycanvas ');
Var context = canvas. getContext ('2d ');
Context. beginPath ();
Context. rect (188.0, 50,200,100.375 );
Context. fillStyle = 'white ';
Context. fill ();
Context. lineWidth = 1;
Context. strokeStyle = 'red ';
Context. stroke ();
Script
You will find the border style is different after the execution, obviously the bottom is very fine. The color is also slightly different.
After you change context. rect (188.0, 50,200,100.375) to context. rect (188.0, 50,200,100), the style is completely consistent.
This shows that when you draw a rectangle, if the parameters in the rectangle are not integers, it will easily lead to border problems. Therefore, we suggest you use them after rounding.
