html5 Canvas drawing tutorial (9)—Drawing rectangles and circles in canvas_html5 tutorial skills

This article talks about how to draw rectangles and circles in canvas. They are basic graphics. Of course, there are more basic graphics than them, but in canvas, you can only draw rectangles and circles without using other methods to simulate them.

Canvas draws rectangle
1, fillRect and strokeRect
fillRect can directly fill a rectangle, and the fill style is the style you currently set; the same The rationale for strokeRect is to directly stroke a rectangle
. Their parameters are consistent, in order (starting point x coordinate, starting point y, rectangular width, rectangular height). The starting point here, note, refers to the upper left corner of the rectangle.
We usually use them to do simple things, and they can only do simple things. Why? Because there is no "path" in the graphics they drew, it just came out directly.
For example, if you first fill a rectangle with fillRect, and then you want to stroke the rectangle, if you use stroke(), it will have no effect, because although there is a rectangle, there is no path.
If you desperately want to stroke this rectangle, you can use strokeRect() to stroke a rectangle at the same position - but they are actually independent, just overlapping positions.

Copy code

The code is as follows:

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

If we want a rectangle with both fill and stroke, then using fillRect and strokeRect at the same time will undoubtedly be cumbersome . So 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 it only draws a path. As for the stroke or filling, you have to complete it yourself later. .

Copy code

The code is as follows:

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

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

3, lineTo
Of course you can also use 4 lineTo to draw a rectangle like my line drawing tutorial. But this is not necessary, see that article for details.

Canvas draws a circle
There is no eye in the sky. In fact, canvas does not have a real function that can directly draw a circle. What it draws is actually a 360-degree arc. , it looks like a circle.
We have talked about the function of canvas to draw arcs before, namely arc. We use it to draw a circle:

Copy code

The code is as follows:

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

This arc is the same as rect, it also draws a path, 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 use the upper left corner of the rectangle as the starting point to determine its position, but we usually use the center of the circle to determine the position of the circle.
If you want to draw a set of horizontally and vertically centered rectangles and circles, 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, let me give you the current formula. For aligned circles and rectangles, the coordinates of the center of the circle = the coordinates of the rectangle and half the width and height of the rectangle.
That is, circle center x = rectangle x rectangle width/2, circle y = rectangle y rectangle height/2. This way they are absolutely aligned.
Although arc is not as easy to use as the method of directly drawing a circle - the method I envisioned to directly draw a circle only requires 3 parameters, namely the coordinates of the center of the circle and the radius - but arc can not only draw circles, but also semicircles and so on. , so the function is more powerful and you can make do with it.
Since there is a circle, there should be an ellipse, but there is not even a regular function for drawing a circle in canvas, let alone an ellipse. Therefore, drawing an ellipse must be simulated by other methods. This is more complicated, so I will leave it to later.