Comments: In the previous article, I talked about how to draw Rectangles and circles. They all have native canvas plotting functions. The rounded rectangle mentioned in this article is simulated only by other methods. We use the ability to split the surface into lines, and it is easy to find that the rounded rectangle is actually composed of four hook-like curves, interested friends can learn about the last article I talked about the method of drawing Rectangles and circles. They all have native canvas plotting functions to complete. The rounded rectangle mentioned in this article is simulated only by other methods.
For a normal rounded rectangle, we first assume that the radians of the four corners are consistent-because it is better to draw. We use the ability to split the surface into lines, it is easy to find that the rounded rectangle is actually composed of four hook-like curves.
When it comes to hooks, if you have read my articles about arcTo, you may understand this image and you can use arcTo to draw it.
I mentioned when talking about arcTo. One feature of arcTo is that its 2nd tangent extension does not affect the lines it draws (in the last part ), this also provides convenience for us to draw rounded rectangle without worrying about deformation.
The canvas method I found on a foreign website is shown below, which should be the most efficient.
The Code is as follows:
// Rounded rectangle
CanvasRenderingContext2D. prototype. roundRect = function (x, y, w, h, r ){
If (w & lt; 2 * r) r = w/2;
If (h & lt; 2 * r) r = h/2;
This. beginPath ();
This. moveTo (x + r, y );
This. arcTo (x + w, y, x + w, y + h, r );
This. arcTo (x + w, y + h, x, y + h, r );
This. arcTo (x, y + h, x, y, r );
This. arcTo (x, y, x + w, y, r );
// This. arcTo (x + r, y );
This. closePath ();
Return this;
}
Parameters of this function are x, y, width, height, and radius of the rounded corner. Pay special attention to the last parameter-the radius of the rounded corner.
This method draws a rounded rectangle using arcTo four times, and the radians of each corner are the same. The coordinate point of the rounded rectangle is the same as the upper left corner of the rectangle, but its starting point is not here,:
You can remove a line and see how this method works.
Of course, remember to close the path-closePath, No matter what image you draw, to avoid potential risks.
This method finally has a return this to enable you to use the chained syntax, such:
Ctx. roundRect (200,300,200,120, 20). stroke (); remove it if you don't need it.
If you do not want to expand the ContextRenderingContext2D prototype, you can also create another function for this method.
When I found this function, I didn't even know what arcTo was, so I didn't remember the website on which it was found. It was not my original one. I would like to thank the author.
In the previous article, I have always stressed that each corner of the rounded rectangle drawn by this method is consistent, it is because border-radius in css3 can easily draw a rounded rectangle with inconsistent adjacent edges of each corner or even each corner. I will look for a way to draw an irregular rounded rectangle in the canvas, but I personally think it is quite difficult.
