Canvas drawing--Beginner's article

the beginner of canvas drawing

The little woman is ready to make canvas drawings into junior, intermediate and advanced articles to introduce, readers do not worry oh.

Beginner's article A. First of all, what is canvas?

Canvas is a label provided by HTML5 to show the drawing effect. Canvas Original, Sail

Cloth. Used in HTML pages to show drawing effects. The first canvas was an Apple proposal that was implemented today in most browsers.

Canvas English [' kænv?s] beauty [' kænv?s] canvas canvas

two. Let's take a look at the basic usage of canvas:

<canvas></canvas>

(1) Use the canvas label (which is used to display the image) to create an area in the page. You can set the size of the area by setting its width and height.

(2) By default, canvas has a width of 300 and a height of 150.

(3) Do not use CSS to set the width of the height (there will be stretching problems), you should use HTML attributes.

(4) If the browser does not support the canvas label, it will be interpreted as a div tag. As a result, text is often embedded in the canvas to prompt the user's browser's ability.

(5) Canvas compatibility is very strong, as long as the support of the label, the basic functions are the same, so do not consider compatibility issues.

(6) Canvas itself cannot be plotted. is to use JavaScript to complete the drawing. The Canvas object provides an API for various drawing purposes.

three. The next step is to introduce the basic drawing method of canvas.

1. Basic Drawing steps:

(1). Get the Canvas object.

(2). Call the GetContext method, providing the string parameter ' 2d '.

(3). The method returns an object of type canvasrenderingcontext2d. The object provides basic drawing commands.

(4). Use the method provided by the Canvasrenderingcontext2d object to draw.

(5). Basic Drawing command:

A. Set where to start drawing: Context.moveto (x, y).

B. Set the line to the position: Context.lineto (x, y).

C. Stroke drawing: Context.stroke ().

D. Fill drawing: Context.fill ().

E. Closed path: Context.closepath ().

2. Draw basic Lines

var canvas = document.createelement (' canvas ');

Canvas.width = 500;

Canvas.height = 400;

Canvas.style.border = ' 1px dashed red ';

Document.body.appendChild (canvas);

Get Canvasrenderingcontext2d Object

var context = Canvas.getcontext (' 2d ');

Set the starting point

Context.moveto (0, 0);

Draw a line

Context.lineto (500, 400);

Set the starting point

Context.moveto (0, 400);

Draw a line

Context.lineto (500, 0);

Stroke Display Effect

Context.stroke ();

The result of the operation is:

3. Computer Cartesian coordinate system

It is important to note that the Cartesian coordinate system of a computer is somewhat different from the Cartesian coordinate system in our mathematical learning, in the vertical direction, downward is the positive direction, and upward is negative direction, which is different from the coordinate system in mathematics. As shown in the following:

Code Analysis:

(1). A canvas label is required for drawing, which is used to display the image.

(2). Canvas's height do not use CSS to set, there will be stretching problems. You should use property settings directly.

(3). But canvas just shows the label of the image, it doesn't have the ability to draw. You need to use canvas's contextual tools to implement your drawing.

(4). Use Canvas.getcontext (' 2d ') to get the drawing tool, which is an object of type canvasrenderingcontext2d.

(5). A drawing is required and the starting point of the drawing is preferred.

A. Using canvas to draw, the most important thing is that he advocated the first stroke, and then connect the drawing effect.

B. It is therefore necessary to set the starting point first and then to describe other points of need based on the starting point.

C. Use the Canvasrenderingcontext2d.moveto (x, Y) method to set the starting point.

D. where x, y represents the position in the coordinate system.

(6). Use Canvasrenderingcontext2d.lineto (x, y) to describe the next point in the drawing line. By analogy, you can describe multiple points.

(7). After the stroke is finished, you need to use the Canvasrenderingcontext2d.stroke () method to connect. To show the effect.

4. Basic methods:

(1) GetContext method

Syntax: Canvas.getcontext (TYPESTR)

Describe:

This method is used to draw the context tool.

If you are drawing a planar graphic using ' 2d ' as an argument, use ' WebGL ' if you draw a stereoscopic graphic.

Returns an object of type canvasrenderingcontext2d using ' 2d '.

Returns an object of type Webglrenderingcontext using ' WebGL '.

(2) MoveTo method

Syntax: Canvasrenderingcontext2d.moveto (x, y)

Describe:

This method is used to set the drawing start point.

Where the parameter x, Y represents the position in the coordinate system, respectively, is the x-coordinate and the y-coordinate.

(3) LineTo method

Syntax: Canvasrenderingcontext2d.lineto (x, y)

Describe:

This method is used to set another point where the line needs to be drawn. The final stroke is then wired to the point described by the current point and method parameters.

Where the parameter x, Y represents the position in the coordinate system, respectively, is the x-coordinate and the y-coordinate.

(4) Stroke method

Syntax: Canvasrenderingcontext2d.stroke ()

Description: This method is used for wiring, and all the points described are concatenated in the specified order.

(5) Conclusion

A draw first to get context, that is, the drawing tool

b drawing needs to set the starting coordinates

The C drawing is the first stroke, then one to the next.

D draw only a single style (color, etc.) in turn

5. Non-0 surround principle

The so-called non-0 surround principle refers to: the internal and external graphics are drawn in the opposite direction (a drawing direction is clockwise, a direction is drawn counterclockwise), when using the Fill () method, is filled with only the inner shape outside the outer shape of the inside part.

As an example:

Analysis:

If we use +1 for the clockwise (positive direction), with-one to represent counter-clockwise (negative direction), then -1+ (+1) + (-1) =-1, not equal to zero, it satisfies the non-0 wrapping principle, when using the Fill () method, is filled with the small square and the middle part of the large square.

6. Closed Path Closepath

Syntax: Canvasrenderingcontext2d.closepath ()

Description: Use this method to automatically connect the last stroke to the beginning of the stroke.

Code

...

Ctx.moveto (100, 100);

Ctx.lineto (300, 100);

Ctx.lineto (300, 200);

Ctx.closepath ();

Ctx.stroke ();

The result is:

7. Linetype-related properties

Setting strokes and fills may not necessarily use only a thin black line. You can use some properties to set its effect

Canvasrenderingcontext2d.linewidth set the line width.

Canvasrenderingcontext2d.linecap Sets the line end type.

Canvasrenderingcontext2d.linejoin sets the inflection point of the intersection line.

Canvasrenderingcontext2d.getlinedash () gets an array of segment styles.

Canvasrenderingcontext2d.setlinedash () sets the line segment style.

Canvasrenderingcontext2d.linedashoffset draws the segment offset.

7.1. Set the line width

Syntax: canvasrenderingcontext2d.linewidth = number

Description: Sets the line width.

Code:

...

Ctx.moveto (100, 100);

Ctx.lineto (300, 100);

Ctx.stroke ();

Ctx.beginpath ();

Ctx.linewidth = 10;

Ctx.moveto (100, 250);

Ctx.lineto (300, 250);

Ctx.stroke ();

Effect:

7.2 Set Line End type

Syntax: Canvasrenderingcontext2d.linecap = value

Describe:

Set the style at the end of the Linetype, with the following values: ' Butt ' (default), ' Round ', ' Square '.

' Butt ' means that both ends use square ends.

' Round ' means ends with rounded corners.

' Square ' indicates the end of the protruding fillet.

Code

...

Ctx.linewidth = 10;

Ctx.moveto (100, 100);

Ctx.lineto (300, 100);

Ctx.stroke ();

Ctx.beginpath ();

Ctx.linecap = ' round ';

Ctx.moveto (100, 130);

Ctx.lineto (300, 130);

Ctx.stroke ();

Ctx.beginpath ();

Ctx.linecap = ' square ';

Ctx.moveto (100, 160);

Ctx.lineto (300, 160);

Ctx.stroke ();

Effect:

7.3 Setting the inflection point of the intersection line

Syntax: Canvasrenderingcontext2d.linejoin = value

Describe:

Sets the inflection point description for two lines. can take value ' round ', ' bevel ', ' miter ' (default)

' Round ' uses rounded corners to connect.

' Bevel ' uses a flat-cut connection.

' Miter ' uses a right angle turn.

Code...

Ctx.linewidth = 10;

Ctx.linejoin = ' round ';

Ctx.moveto (100, 100);

Ctx.lineto (200, 200);

Ctx.lineto (300, 100);

Ctx.stroke ();

Ctx.beginpath ();

Ctx.linejoin = ' bevel ';

Ctx.moveto (100, 150);

Ctx.lineto (200, 250);

Ctx.lineto (300, 150);

Ctx.stroke ();

Ctx.beginpath ();

Ctx.linejoin = ' miter ';

Ctx.moveto (100, 200);

Ctx.lineto (200, 300);

Ctx.lineto (300, 200);

Ctx.stroke ();

The effect is:

7.4 Dashed Line

Grammar:

Canvasrenderingcontext2d.linedashoffset = number

Canvasrenderingcontext2d.getlinedash ()

Canvasrenderingcontext2d.setlinedash ()

Describe:

The Setlinedash is used to set the offset at which to start drawing dashes. The positive or negative representation of a number is offset.

The Getlinedash () and Setlinedash () methods use arrays to describe the lengths of solid and dashed lines.

Code

...

Ctx.moveto (100, 90);

Ctx.lineto (100, 110);

Ctx.moveto (300, 90);

Ctx.lineto (300, 110);

Ctx.moveto (100, 140);

Ctx.lineto (100, 160);

Ctx.moveto (300, 140);

Ctx.lineto (300, 160);

Ctx.moveto (100, 190);

Ctx.lineto (100, 210);

Ctx.moveto (300, 190);

Ctx.lineto (300, 210);

Ctx.stroke ();

Ctx.beginpath ();

Ctx.moveto (100, 100);

Ctx.lineto (300, 100);

Ctx.stroke ();

Ctx.beginpath ();

Ctx.setlinedash ([5, 5]);

Ctx.moveto (100, 150);

Ctx.lineto (300, 150);

Ctx.stroke ();

Ctx.beginpath ();

Ctx.linedashoffset =-2;

Ctx.moveto (100, 200);

Ctx.lineto (300, 200);

Ctx.stroke ();

The effect is:

7.5 Fill and stroke styles

Grammar:

Canvasrenderingcontext2d.strokestyle = value

Canvasrenderingcontext2d.fillstyle = value

Describe:

Strokestyle can set the stroke color, just like the syntax of CSS

FillStyle set the fill color, as with CSS syntax

These two properties can also set the gradient object.

Code

for (Var i=0;i<6;i++) {

for (Var j=0;j<6;j++) {

Ctx.strokestyle = ' rgb (0, ' + math.floor (255-42.5*i) + ', ' +

Math.floor (255-42.5*j) + ') ';

Ctx.beginpath ();

Ctx.arc (12.5+j*25,12.5+i*25,10,0,math.pi*2,true);

Ctx.stroke ();

}

}

The effect is:

Canvas drawing--Beginner's article