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

This article will explain in detail how html5 Canvas draws rectangles and circles. Xiaobian thinks it is quite practical, so share it with you as a reference. I hope you can gain something after reading this article.

canvas drawing rectangle

1, fillRect and strokeRect

fillRect can fill a rectangle directly, and the fill style is the style you currently set; similarly, strokeRect can stroke a rectangle directly

Their parameters are consistent, in order (starting x coordinate, starting y, rectangle width, rectangle height). The starting point here, notice, is the point in the upper-left corner of the rectangle.

We usually use them for simple things, and they can only do simple things. Why not? Because they didn't have a "path," they just came out.

For example, if you fill a rectangle with fillRect, and you want to stroke the rectangle, if you use stroke(), it won't work because there is a rectangle, but there is no path.

If you're desperate to stroke this rectangle, you can stroke a rectangle in the same position using strokeRect()-but they're separate, just overlapping.

The code is as follows:

ctx.fillRect(200,100,50,40);

ctx.strokeRect(200,100,50,40);

If we want a rectangle that has both fill and stroke, it is cumbersome to use fillRect and strokeRect at the same time. In this case, we usually use the following method.

2,rect

The parameters of rect are no different from fillRect and strokeRect. The difference is that he draws only the path, and as for stroke or fill, you have to complete it yourself.

The code is as follows:

ctx.rect(300,100,50,40);

ctx.stroke()

ctx.fill();

What good is that? As I mentioned in the previous article, filling or stroking consumes a lot of resources, so we often need to draw hundreds of paths at once (such as loops) before stroking or filling. Using rect to draw the path and fill it last avoids the fillRect and strokeRec problem of filling or stroking each time.

3，lineTo

Of course you can also draw a rectangle with 4 lineTos like my line drawing tutorial. But this is unnecessary, see the article for details.

Canvas draws circles

The sky has no eyes. In fact, canvas does not have a real function that can directly draw a circle. What he draws is actually a 360-degree arc, which looks like a circle.

canvas is a function that draws an arc, as we talked about earlier, arc. We use it to draw a circle:

The code is as follows:

ctx.arc(300+25,100+20,20,0,Math.PI*2);

ctx.stroke()

ctx.fill();

This arc, like rect, draws a path, and the fill or stroke needs to be completed later.

However, it should be noted that the position judgment of a circle is different from that of a rectangle. We determine the position of a rectangle by starting at its upper left corner, but we usually determine the position of a circle by its center.

If you want to draw a set of horizontally and vertically centered rectangles and circles, remember not to mistake the starting point of the rectangle for the starting point of the circle-the starting point of the circle is the center!

Forget it. I'll give you a formula now. Align circle and rectangle. The coordinates of the center = the coordinates of rectangle + half the width and height of rectangle.

That is, center x= rectangle x+ rectangle width/2, circle y= rectangle y+ rectangle height/2. So they are absolutely aligned.

Although arc is not as easy to use as the direct method of drawing a circle-the direct method of drawing a circle that I imagine only requires three parameters, namely the center coordinate or radius-arc can draw not only a circle, but also a semicircle or something, so it is more powerful and can be used.

After reading this article, I believe you have a certain understanding of "how to draw rectangles and circles in html5 Canvas." If you want to know more about this knowledge, please pay attention to the industry information channel. Thank you for reading!

About "html5 Canvas how to draw rectangles and circles" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it 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.