Paths form the outlines that will fill to make graphics. This extract from Ian Elliot's book on JavaScript Graphics looks at how to use SVG paths.

Now available as a paperback or ebook from Amazon.

JavaScript Bitmap Graphics
With Canvas

[画像:largecover360]

Contents

1. JavaScript Graphics
2. Getting Started With Canvas
3. Drawing Paths
   Extract: Basic Paths
   Extract: SVG Paths
   Extract: Bezier Curves
4. Stroke and Fill
   Extract: Stroke Properties
   Extract: Fill and Holes
   Extract: Gradient & Pattern Fills
5. Transformations
   Extract: Transformations
   Extract: Custom Coordinates
   Extract Graphics State
6. Text
   Extract: Text, Typography & SVG
   Extract: Unicode
7. Clipping, Compositing and Effects
   Extract: Clipping & Basic Compositing
8. Generating Bitmaps
   Extract: Introduction To Bitmaps
   Extract : Animation
9. WebWorkers & OffscreenCanvas
   Extract: Web Workers
   Extract: OffscreenCanvas
   
10. Bit Manipulation In JavaScript
    Extract: Bit Manipulation
11. Typed Arrays
    Extract: Typed Arrays
12. Files, blobs, URLs & Fetch
    Extract: Blobs & Files
    Extract: Read/Writing Local Files
    Extract: Fetch API **NEW!
13. Image Processing
    Extract: ImageData
    Extract:The Filter API
    
14. 3D WebGL
    Extract: WebGL 3D
15. 2D WebGL
    Extract: WebGL Convolutions

<ASIN:B07XJQDS4Z>

<ASIN:1871962579>

<ASIN:1871962560>

In book but not in this extract

• Paths
• The Default Path Object
• The Rectangle
• Circles and Ellipses
• Ellipse
• The arcTo Function
• Bezier Curves
• Using SVG Paths

You don’t have to know anything about SVG paths to make use of the notation that it introduces to specify a path. The basic idea is that there is a set of single letter commands that you can include in a string and these define the path.

For example, M means moveTo and so a string "M50,50" means the same thing as

moveTo(50,50);

The commands available that are the direct equivalent of function calls are:

• Mx y = moveTo(x,y)

• Lx y = lineTo(x,y)

• Qx1 y1 x y= quadraticCurveTo(x1.y1,x,y)

• Cx1 y1 x2 y2 x y = bezierCurveTo(x1,y1,x2,y2,x,y)

• Z = closePath()

You can use a string specifying the path in the Path2D constructor.

For example:

var path=new Path2D("M50 50 L100 100");

creates a path that is identical to:

var path=new Path2D();
path.moveTo(50,50);
path.lineTo(100,100);

You might ask at this point what is the advantage? The string notation is much more compact than the function calls. In addition it goes beyond what the function calls can do. For example, if you use the same string commands in lower case then the co-ordinates are all taken to be relative to the current position. This is very useful as to get relative forms of the function calls you have to do arithmetic.

If you change the previous example to:

var path=new Path2D("m50 50 l100 100");

it creates a path that moves to cx+50, cy+50 where cx and cy is the current position and then draws a line 100 pixels horizontally and 100 pixels vertically, i.e. to cx+50+100,cy+50+100.

There are also two additional line drawing commands:

• Hx is a "horizontal line to" command

• Vy is a "vertical line to" command

which only require you to supply an x or a y co-ordinate. For example "H50" draws a line from the current position to 50,cy.

The commend for drawing an elliptical arc command is A:

• Arx ry rot size sweep x y

This draws an arc, with radii rx and ry, between the current point and x, y. The rot parameter controls the rotation of the radii. The size and sweep flags are confusing at first, but not when you realize that there are usually two ellipses that connect two points – a big arc and a small arc.

[画像:SVGpath1]

Which of these four possible arcs do you want to use to connect the start point to the end point? This is what the size and sweep flags are for. The size flag either selects the small arcs or the large arcs. In this case large or small is measured using the angle specified by sweep. If you set size to 0 then you select the two small arcs:

[画像:SVGpath2]

If you set size to 1 you select the two large arcs:

[画像:SVGpath3]