Graphic canvas)

Before getting started, we need to first discuss the canvas grid or coordinate space (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 as the right image. 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. Canvas only supports 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.

 

 

Rectangles

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

 
Fillrect (X, Y, width, height): draws a filled rectanglestrokerect (X, Y, width, height): draws a rectangular outlineclearrect (X, Y, width, height ): clears the specified area and makes it fully transparent
 

They all accept four parameters,XAndY specifies the position (relative to the origin) in the upper left corner of the rectangle,Width AndHeightIs the width and height of the rectangle. Okay, let's take a look.

Example of creating a rectangle

 
Function draw () {var canvas = document. getelementbyid ('tutorial '); If (canvas. getcontext) {var CTX = canvas. getcontext ('2d '); CTX. fillrect (25, 100,100); CTX. clearrect (45, 45, 60, 60); CTX. strokerect (50, 50, 50, 50 );}}
 

The output result should be the same as the following.FillrectThe function draws a large black rectangle (100x100 ),ClearrectThe function clears the 60x60 square in the middle, and thenStrokerectThe function outlines a 50x50 rectangle border in the cleared space. On the next page, we will seeClearrectThe function is similar to the other two methods, and how to change the filling and border color of the image.

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.

 
Beginpath () closepath () stroke () Fill ()
 

The first step is to useBeginpathCreate 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 callBeginpath, The sub-path group will be reset, and new images can be drawn.

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

Step 3: CallClosepathMethod, it will try to use a straight line to connect the current endpoint and the start endpoint to close the path, but if the graph has been closed or there is only one point, it will do nothing. This step is not required.

The last step is to callStrokeOrIn this case, the image is actually drawn to the canvas..StrokeIs the border of the drawing,FillA solid image is filled in.

Note:WhenFillOpen Paths are automatically closed without callingClosepath.

Draw a simple image (such as a triangle)CodeAs follows.

 
CTX. beginpath (); CTX. moveTo (75,50); CTX. lineto (100,75); CTX. lineto (100,25); CTX. Fill ();
 

MoveTo

MoveToIt is a very useful method. Although it cannot be used to draw anything, it is part of a practical method for drawing paths. You can think of it as a process of bringing a pen up and moving from one point to another.It acceptsXAndY(New Coordinate Position) as a parameter.When canvas is initialized or calledBeginpathThe starting coordinate is set to the origin (0, 0 ). In most cases, we useMoveToMethod to move the starting coordinate to another place or draw a discontinuous path. Look at the smiling face on the right. The red line is used.The moving trajectory of moveTo.

Lines

We useLinetoMethod to draw a straight line.LinetoThe method accepts the coordinates (x, y) of the end point as the parameter. The starting coordinate depends on the previous path. The ending point of the previous path is the starting point of the current path.MoveToMethod.The difference between fill and strok is that the fill path is automatically closed, but stroke is not used. If the path is not closed, only the two sides are outlined.