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

This article will explain in detail how to split the noodles into lines to simulate a rounded rectangle in html5 Canvas. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

For a normal rounded rectangle, let's assume that the rounded corners of his four corners are the same-because it's easier to draw. Using the ability to split the surface into lines, we can easily find that the rounded rectangle is actually made up of four hook-like curves.

When it comes to hooks, if you have read my article introducing arcTo, then you may understand that this kind of figure can be drawn with arcTo.

As I mentioned when I talked about arcTo, a feature of arcTo is that the extension of his second tangent will not affect the lines he draws (in the last part above), which also makes it convenient for us to draw rounded rectangles without having to worry about deformation.

The following is the method of drawing rounded rectangles by canvas that I found on foreign websites, which should be the most efficient.

The code is as follows:

/ / rounded rectangle

CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {

If (w)

< 2 * r) r = w / 2; if (h < 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; } 此函数的参数，依次是x坐标，y坐标，宽度，高度，圆角半径。特别要注意最后这个参数——圆角半径。 此方法用了4次arcTo画出了一个圆角矩形，他的每个角的弧度都是一样的。此圆角矩形的坐标点也是和矩形一样的左上角，但他的起笔点可不是这里，而是：

You can remove one of the lines and see how this method works.

Of course, as a reminder, no matter what figure you draw, remember to close the path-closePath, to avoid leaving hidden dangers.

There is a return this at the end of this method so that you can use chained syntax, such as:

Ctx.roundRect (200, 300, 200, 120, 20). Stroke (); you can remove him if you don't need it.

If you don't want to extend the ContextRenderingContext2D prototype, you can also use this method as a separate function.

When I found this function at that time, I didn't even know what arcTo was, so I didn't remember which website I found it on. Anyway, I didn't create it. I'd like to thank the author here.

This is the end of the article on "how to split the noodles into lines in html5 Canvas to simulate a rounded rectangle". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

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.