Html5 Canvas painting tutorial (9)-draw a rectangle and a circle in the canvas

Comments: This article describes how to draw Rectangles and circles in a canvas. They are basic images. Of course, there are more than basic graphics, but in canvas, only rectangular and circular shapes do not need to be simulated using other methods, interested friends can understand how to draw Rectangles and circles in the canvas. They are basic images. Of course, there are more than basic graphics, but in canvas, only rectangular and circular shapes do not need to be simulated using other methods.

Canvas draws a rectangle
1. fillRect and strokeRect
FillRect can be used to directly fill out a rectangle. The fill style is your current style. Similarly, strokeRect is used to draw a rectangle directly.
Their parameters are consistent, in turn (starting point x coordinate, starting point y, width of the rectangle, height of the rectangle ). The starting point here. Note that it 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 images they draw do not have the "path" statement, they come out directly.
For example, you first fill a rectangle with fillRect, and then you want to stroke the rectangle. If you use stroke (), it will not work, because although there is a rectangle, but there is no path.
If you want to draw this rectangle, you can use strokeRect () to draw a rectangle in the same position-but they are actually independent, but they only overlap.

The Code is as follows:
Ctx. fillRect (200,100, 50, 40 );
Ctx. strokeRect (200,100, 50, 40 );

If we want a rectangle with filled and stroke, using fillRect and strokeRect at the same time is undoubtedly cumbersome. In this case, we usually use the following methods.

2, rect
There is no difference between the rect parameters and fillRect and strokeRect. The difference is that they only draw the path. As for the stroke or fill, you need to complete it yourself.

The Code is as follows:
Ctx. rect (300,100, 50, 40 );
Ctx. stroke ()
Ctx. fill ();

What are the benefits of doing so? As mentioned in the previous article, filling or stroke consumes a lot of resources, so we often (such as loop) need to draw hundreds of paths at a time, and then draw or fill. In this case, you can use rect to draw the path and then fill it in. This avoids the problem that fillRect and strokeRec need to fill or stroke each time.

3, lineTo
Of course, you can also use four lineTo to draw a rectangle like my Line Painting tutorial. But this is unnecessary. For details, refer to the article.

Canvas circle
In fact, canvas does not really have a function that can draw a circle directly. It actually draws an arc of 360 degrees and looks like a circle.
We have mentioned the function of drawing an arc on canvas, that is, 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 ();

Like the rect, this arc draws a path. filling or stroke needs to be completed later.
Note that the position of the circle is different from that of the rectangle. We start from the upper left corner of the rectangle to determine its position, but we usually use the center of the circle to determine its position.
If you want to draw a group of horizontally and vertically centered Rectangles and circles, 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 will give you a formula for the present. The circle and the rectangle are aligned. The coordinates of the center = the coordinates of the rectangle + the width and height of the half of the rectangle.
That is, the center 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 the method of directly circle-I imagine that the method of directly Circle only needs three parameters, I .e., the Center Coordinate, that is, the radius-but arc can not only draw circles, you can also draw a half circle or something, so the function is more powerful and you can use it.
Since there is a circle, there should be an elliptic, but there is no formal circular function in the canvas, let alone an elliptic. Therefore, an elliptical image must be simulated using other methods. This is complicated. I will leave it for later.