Comment: I found that the borders drawn by the rectangle function inside have inconsistent styles. Let me share the ideas for solving the problem with everyone. Interested friends should not miss it.
In the past two days, I need to use the HTML5 drawing of my colleague. I found that the borders drawn by the function with the rectangle inside had inconsistent styles. Finally, I found the crux of the problem through some exclusion methods, and I will share them with you.
First attach the HTML5 code to draw a rectangle:
<canvas></canvas>
<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 that the border style is different after execution, and the bottom is obviously very thin. The colors are slightly different
After modifying context.rect(188.0, 50, 200, 100.375) to context.rect(188.0, 50, 200, 100), it is found that the style is completely consistent.
This shows that when drawing a rectangle, if there are any parameters inside that are not integers, it is easy to cause border problems, so it is recommended that you round it before using it.