HTML5 's canvas: Paths

the HTML5 's canvas path is a series of drawing instructions between points and points. For example, a series of points use lines between them, or arcs with them.

The path is used to draw various types of shapes (lines, circles, polygons, etc.) on the HTML5 canvas, so it is important to understand this core concept.

Start and close paths

The path starts and ends with a 2D context function 调用beginPath（） and closePath（）  , like this:

var canvas  = document.getElementById ("Ex1"); var context = Canvas.getcontext ("2d");  Context.beginpath (); ... path drawing operationsContext.closepath ();

MoveTo ()

When using a path graph, the virtual "pen" or "pointer" is used. This virtual pointer is always located at some point. Moving virtual pointers is done by using the 2D context feature MOVETO（X，Y） , just like this:

Context.moveto (10,10);

LineTo ()

Context.beginpath (); Context.moveto (10,10); Context.lineto (50,50); Context.closepath ();

Stroke () + fill ()

Context.beginpath (); Context.moveto (10,10); Context.lineto (60,50); Context.lineto (110,50); Context.lineTo (10,10); Context.stroke (); Context.closepath (); Context.beginpath (); Context.moveto (100,10); Context.lineto (150,50); Context.lineto (200,50); Context.lineto (100,10); Context.fill (); Context.closepath ();

Line Width

Context.linewidth = 10;

here draw the line width of 1,5 and 10 three lines:

Line Cape

• Butt
• Round
• Square

It can be a bit hard to see the value of drawing a difference between a line 的linecap 对接 and 广场 . So, I created a couple of examples using line pairs 对接 and 广场 , closer to each other, so you can see the difference. The top or left line is being used 的对接 , and the bottom or line right is used 方 .

As you can see, using that line 的linecap value 广场 has an extra rectangle at the end, which makes the line time slightly longer.

Line Join

The lineJoin properties of the 2D background define how the points draw two straight lines of connection. When the two-wire connection points are called "line connections". The lineJoin property can have the following values:

• Oblique cut
• Angle
• Round

Here are three code examples to set up a line connection:

Context.linejoin = "oblique cut"; Context.linejoin = "Umbrella"; Context.linejoin = "Circle";

The value for 斜切 the line being drawn joins the result in the corner of a triangle.

The value is the 斜面 result that the drawn line joins in a planar (linear) corner.

The value is 轮 drawn for the line connection that caused the fillet.

Here are three examples showing (from left) 斜角 , 斜面 and as a 圆 property of value lineJoin .

Arc ()

The two-dimensional context feature 弧（） draws arcs on the canvas.

The 弧（） function has 6 parameters:

• x: The x-coordinate of the center point of the arc.
• ? : The center point of the y-coordinate arc.
• radius : The radius of the arc.
• by StartAngle: Radians from the arc start angle.
• endangle: The arc ends at the radian angle.
• Counterclockwise: Whether the direction of the set is drawn counterclockwise or not (= not clockwise).

Here is a code example:

Context.linewidth = 3; VAR X = 50; VAR Y = 50; var radius = 25; var by startangle = (math.pi/180) * 45; VAR Endangle = (math.pi/180) * 90; var counter-clockwise = false; Context.beginpath (); Context.arc (x, y, radius, by Startangle,endangle, counterclockwise); Context.stroke (); Context.closepath ();

This code example draws the center point of an arc in 50,50,25 pixels, starting at 45 degrees and continuing to a radius of 180 degrees. To convert from 0-360 degrees to radians, you may have noticed.

Here's what the code example looks like when drawing on the canvas:

The following is the same code example, but with the 逆时针 set to 真 :

Draw a complete circle, simple set 由startAngle to 0 and endAngle 2 * Math.PI equal to it （Math.PI / 180）* 360 .

Contains ArcTo ()

The two-dimensional context has a 包含arcTo（） function, but its ability to use imitation 了lineTo（） and 弧（）  so I will skip it.

To Quadraticcurveto ()

到quadraticCurveTo（）draw a two-time Bezier curve from one point to another in the function. The curve is controlled by a single control point. Here is a code example:

Context.linewidth = 3; VAR FromX = 50; VAR FromY = 50; VAR TOX = 100; var toy = 50; VAR CPX = 75; VAR CPY = 100; Context.beginpath (); Context.moveto (fromx,fromy); Context.quadraticcurveto (Cpx,cpy,tox, toys); Context.stroke (); Context.closepath ();

Use Control point 75,100 (cpx,cpy) This code example draws a curve, from 50, 50 to 100, 50. The resulting curve is this:

The small dot on the canvas is the point where I got the control point. It is not part of the curve normal.

Beziercurveto ()

The bezierCurveTo（） function draws a Bezier curve three times from one point to another. The three-time Bezier curve has 2 control points, and two Bezier curves have only 1 control points. Here is a code example:

Context.linewidth = 3; VAR FromX = 50; VAR FromY = 50; VAR TOX = 300; var toy = 50; VAR cp1x = 100; VAR cp1y = 100; VAR cp2x = 250; VAR cp2y = 100; Context.beginpath (); Context.moveto (fromx,fromy); Context.beziercurveto (Cp1x,cp1y,cp2x,cp2y,tox, toys); Context.stroke (); Context.closepath ();

Use control points This code example draws a curve, from 50, 50 to 300,50 100,100 (cp1x,cp1y) and 250,100 (CP2X,CP2Y). The resulting curve is this:

The two dots on the canvas are that I have attracted you to show where they are at the control point. They are not drawn as part of the curve.

The following are examples of different start points, end points, and control points:

Context.linewidth = 3; VAR FromX = 50; VAR FromY = 50; VAR TOX = 300; var toy = 50; VAR cp1x = 100; VAR cp1y = 10; VAR cp2x = 250; VAR cp2y = 100; Context.beginpath (); Context.moveto (fromx,fromy); Context.beziercurveto (Cp1x,cp1y,cp2x,cp2y,tox, toys); Context.stroke (); Context.closepath ();

Here is the corresponding curve:

Also, the two dots are that I have explicitly rendered the control point.

HTML5 's canvas: Paths