html5 Canvas drawing tutorial (9) - Draw rectangles and circles in canvas

This article will talk about the method of drawing rectangles and circles in canvas, they belong to basic graphics. Of course, there are more than just them in basic graphics, but in canvas, only drawing rectangles and circles does not require other simulations.

fillRect can directly fill a rectangle, and the filling style is the style you are currently setting; similarly, strokeRect is to directly stroke a rectangle

Their parameters are consistent, in turn (starting point x coordinate, starting point y, width of rectangle, height of rectangle). The starting point here, note, refers to the point in the upper left corner of the rectangle.

We usually use them to do simple things, and they can only do simple things. Why? Because the words that the graphics they draw have no paths, they came out directly.

For example, if you first fill a rectangle with fillRect, then you want to stroke the rectangle. If you use stroke(), there will be no effect, because although there is a rectangle at this time, there is no path.

If you are eager to stroke this rectangle, you can use strokeRect() to stroke a rectangle at the same position - but they are actually independent, just overlapping positions.

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

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

If we want a rectangle that is filled and stroked, it will undoubtedly be cumbersome to use fillRect and strokeRect at the same time. So in this case we usually use the following method.

The parameters of rect are no different from fillRect and strokeRect. The difference is that they only draw the path, and you have to complete the stroke or fill yourself later.

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

ctx.stroke()

ctx.fill();

What are the benefits of doing this? In the previous article, I mentioned that filling or stroke consumes a lot of resources, so we often (such as loops) need to draw hundreds of paths at once, and then stroke or fill. At this time, use rect to draw the path and then fill it again, which avoids the problem of fillingRect and strokeRec filling or stroke every time.

Of course, you can also use 4 linesTo draw a rectangle like my tutorial on drawing lines. But this is unnecessary, please check out that article for details.

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.

We have mentioned the function of canvas drawing an arc before, that is, arc. We use it to draw a circle:

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

ctx.stroke()

ctx.fill();

This arc is the same as rect, and the path is drawn, and the filling or stroke needs to be completed later.

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

If you want to draw a set of rectangles and circles that are centered horizontally and vertically, then you must remember not to regard the starting point of the rectangle as the starting point of the circle - the starting point of the circle is the center of the circle!

Forget it, I'd better give you a formula now, aligned circles and rectangles, coordinates of the center of the circle = coordinates of the rectangles + half of the width and height of the rectangles.

That is, the center of the circle x = rectangle x + rectangle width/2, and the circle y = rectangle y + rectangle height/2. In this way they are absolutely aligned.

Although arc is not as easy to use as a method of directly drawing circles - the method of directly drawing circles I imagined only requires 3 parameters, namely the center coordinates of the circle, that is, the radius - but arc can not only draw circles, but also draw semicircles, so it is more powerful and can be used.

Since there is a circle, there should be an ellipse, but there is not even a regular function to draw a circle in canvas, let alone an ellipse. Therefore, drawing ellipses must be simulated using other methods. This is quite complicated, so I will leave it to the next step.