[]html5 Canvas Drawing Tutorial (9) Draw rectangles and circles in-canvas

This article describes the way to draw rectangles and circles in the canvas, which belong to the underlying graphic. Of course, the underlying graphics are not the only ones, but in the canvas, only the rectangles and circles do not need to be simulated in other ways.

Canvas Draw Rectangle
1,fillrect and Strokerect
FillRect can be filled directly with a rectangle, the fill style is the style you are currently setting, and the same strokerect is a direct stroke of a rectangle
Their parameters are consistent, followed by (start x coordinate, start y, width of rectangle, height of rectangle). Here's the starting point, note that it 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 they do not draw the figure of the "path" of the statement, directly out of the.
For example, you fill a rectangle with fillrect, and then you want to stroke the rectangle, and if you use a stroke (), it won't work, because there's a rectangle, but there's no path.
If you're desperate to stroke the rectangle, you can use Strokerect () to stroke a rectangle in the same place-but they're independent, just overlapping positions.

The code is as follows:

Ctx.fillrect (200,100,50,40); Ctx.strokerect (

If we want a rectangle with a fill and stroke, then using both FillRect and strokerect is undoubtedly cumbersome. So we usually use the following methods in this case.

2,rect
The parameters of rect are no different from fillrect and Strokerect, except that he draws only the path, and as for the stroke or fill you follow your own completion.

The code is as follows:

Ctx.rect (300,100,50,40

What good does it do? As I mentioned in the previous article, fills or strokes consume a lot of resources, so we often (like loops) need to draw hundreds of paths at a time, then stroke or fill them. At this point, the path is drawn with Rect, and the final padding avoids the problem of fillrect and strokerec filling or stroking each time.

3,lineto
Of course you can also draw a rectangle with 4 LineTo, as in my Line-drawing tutorial. But this is not necessary, specifically to view the article.

Canvas Draw Circle
Heaven without eyes, in fact, canvas does not have a real can directly draw a circular function, he is actually drawing a 360 degree arc, looks like a circle.
The function of drawing arcs in canvas we talked about that arc. We used him to draw a circle:

The code is as follows:

Ctx.arc (300+25,100+20,20,0,math.pi*2

This arc, like Rect, draws the path, and the fill or stroke needs to be done later.
However, it is important to note that the position of the circle is not the same as the rectangle. We determine his position as a starting point in the upper left corner of the rectangle, but the position of the circle is usually determined by the center of the circle.
If you want to draw a group of rectangles and circles that are centered horizontally and vertically, you should remember not to take the starting point of the rectangle as the starting point for the circle-the beginning of the circle is the center!

Well, I'm going to give you a formula now, align the circle with the rectangle, the coordinate of the center = the coordinate of the rectangle + half the width of the rectangle is high.
That is, the center x= rectangle x+ Rectangle width/2, round y= rectangle y+ Rectangle Height/2. So they are absolutely aligned.
Although ARC does not have a direct drawing of the method so good-I imagine the direct drawing of the method only need 3 parameters, that is, the center of the coordinates of the radius-but arc can not only draw a circle, but also can draw semicircular what, so the function is more powerful, use also will.
Since there is a circle, there should be an ellipse, but there is not even a formal circle function in the canvas, let alone an ellipse. So the ellipse must be simulated in other ways, which is more complicated, I'll leave it to the back.

[]html5 Canvas Drawing Tutorial (9) Draw rectangles and circles in-canvas