Canvas labels (2)-Drawing Graphics

Grid

Before getting started, we need to first explore the canvas grid or coordinate space ). In the HTML template of the previous page, there is a canvas object with a width of 150 pixels and a height of 150 pixels. I superimpose the default mesh on the screen, such. Usually, one unit of the grid corresponds to one pixel on the canvas. The origin of the grid is located in the upper left corner (coordinates (0, 0 )). The position of all objects in the image is relative to this origin point. In this way, the position of the blue square in the upper left corner is x pixel on the left and Y pixel on the top (coordinate (x, y )). In the subsequent tutorials, we will learn how to move the origin point, rotate, and scale the grid. But now we will use the default status. (Text/ghost warriors)

Attachment: Canvas_default_grid.png

Drawing

Unlike SVG, canvas supports only one basic shape-a rectangle. Therefore, other shapes are composed of one or more paths. Fortunately, there is a set of path rendering functions that allow us to draw quite complex shapes.

Rectangle

Let's first look at the rectangle. There are three functions used to draw the rectangle:

1. Fillrect (X, Y, width, height): draws a filled rectangle
2. Strokerect (X, Y, width, height): draws a rectangular outline
3. Clearrect (X, Y, width, height): clears the specified area and makes it fully transparent

Copy code

They both accept four parameters. x and y specify the upper left corner (relative to the origin) of the rectangle. width and height indicate the width and height of the rectangle. Okay, let's take a look.

The following is the draw () function in the template on the previous page, but the preceding three functions are added.

Example of creating a rectangle

Viewing example

1. Function draw (){
2. VaR canvas = Document. getelementbyid ('utorial ');
3. If (canvas. getcontext ){
4. VaR CTX = canvas. getcontext ('2d ');
6. CTX. fillrect (100,100 );
7. CTX. clearrect (45, 45, 60, 60 );
8. CTX. strokerect (50, 50, 50 );
9. }
10. }

Copy code

The output result should be the same as that. The fillRect function draws a large black rectangle (100x100), and The clearRect function clears the square 60x60 in the middle, then, the strokeRect function outlines a 50x50 rectangle border in the cleared space. On the next page, we will see two other methods similar to the clearRect function, and how to change the filling and border color of the image.
Attachment: Canvas_rect.png
Unlike the path functions in the next section, the effects of these three functions are immediately reflected on the canvas.

Draw path

Unlike drawing a rectangle, creating a path requires some additional steps.

1. Beginpath ()
2. Closepath ()
3. Stroke ()
4. Fill ()

Copy code

The first step is to use beginpath to create a path. In the memory, the paths are stored in the form of a group of sub-paths (straight lines, arcs, etc.), which constitute a picture. Each time beginpath is called, the sub-path group is reset and A New Graph can be created.

The second step is the actual part of the path. We will soon see it.

The third step is to call the closepath method. It will try to use a straight line to connect the current endpoint and the starting endpoint to close the path. However, if the graph is closed or has only one vertex, it will do nothing. This step is not required.

The last step is to call the stroke or fill method. In this case, the image is actually drawn to the canvas. Stroke is the border for drawing the image, and fill will fill out a solid image.

Note: When fill is called, open paths are automatically closed without calling closepath.

The code for drawing a simple image (such as a triangle) is as follows.

1. CTX. beginpath ();
2. CTX. moveTo (75, 50 );
3. CTX. lineto (100,75 );
4. CTX. lineto (100,25 );
5. CTX. Fill ();