HTML5 Canvas Preparation Knowledge

Use canvas for drawing work. Therefore, it is necessary for us to make some description of the terminology in drawing.

First, the canvas

In daily life, if we want to draw, we can find paper, board, canvas and so on tools. In the Web page element, we just need to define a label.

<id= "C" style= "border:1px solid black;" >< P >your browser isn't support. </ P ></ Canvas >

Where canvas is a canvas, and the p in the tag is used for compatibility with the lower version of the browser. If you visit this page to see the contents of the P tag, it means that the browser you are currently using does not support HTML5, but instead sees the rectangle.

Ways to use the canvas:

var c = document.getElementById ("C");

Second, brush

With the canvas on, if we want to doodle, we need a tool like "brushes".

Ways to get a brush using canvas:

var ctx = C.getcontext ("2d");

One of the GetContext methods is to get a pen, but here's a parameter: 2d. The parameter value passed by default. What does that mean? This can be seen as a kind of brush.

Since there is 2d, then there will be 3d? There will be some later, but not now. So let's start with this 2d pen.

Third, rubber

On the canvas, we can use "eraser" if we find that something needs to be removed in some places.

Use canvas to make an eraser:

Ctx.clearrect (X1,Y1,X2,Y2);

Four, coordinates

2d world, is the plane, in a plane to determine a point, requires two values, x-coordinate and y-coordinate. This is a very important basic concept.

The canvas's origin is the upper-left corner, which is consistent with the location of the Web page.

Five, path

Use coordinate points to line up. From the line into the face

HTML5 Canvas Preparation Knowledge