If you change the arc call to:

path1.arc(x, y, r, 0, Math.PI/2);

which draws a quarter of a circle, you can see the lines drawn to the start and end points:

[画像:path9]

If you want the circle to be a sub-path disconnected from any other sub-path then use a moveTo the start point and a moveTo the start of the next sub-path. For example, adding two moveTo calls creates three sub-paths – two lines and the quadrant:

var path1 = new Path2D();
var x = 200;
var y = 200;
var r = 100;
path1.moveTo(100, 150);
path1.lineTo(150, 300);
path1.moveTo(300, 200);
path1.arc(x, y, r, 0, Math.PI / 2);
path1.moveTo(200, 200);
path1.lineTo(400, 400);
ctx.stroke(path1);

[画像:path10]

Finally, notice that any arc that you draw isn’t closed. You can close it using the closePath function.

For example:

var path1 = new Path2D();
var x = 200;
var y = 200;
var r = 100; 
path1.arc(x, y, r, 0, Math.PI / 2);
path1.closePath(); 
ctx.stroke(path1);

which closes the quarter circle to give:

If you were expecting a more traditional closed quadrant then to achieve this you need to add some lines from the start and end to the center of the circle:

[画像:path11]

var path1 = new Path2D();
var x = 200;
var y = 200;
var r = 100; 
path1.moveTo(x,y);
path1.arc(x, y, r, 0, Math.PI / 2);
path1.lineTo(x,y); 
ctx.stroke(path1);

which produces:

[画像:path12]

Ellipse

The ellipse function is a generalization of the arc function. It draws part of an ellipse as specified by start and stop angles as in the case of the arc function. The difference is that you can now specify a horizontal and a vertical radius and a rotation angle:

ellipse(x,y,rx,ry,rot,start angle, stop angle, 
 direction);

This draws an ellipse centered on x,y with horizontal radius rx and vertical radius ry. The start angle, stop angle and direction parameters work in the same way as in the arc function. The rot parameter rotates the entire ellipse so that you can draw something more general.

For example:

path1.ellipse(300,200,150,50,0,0,Math.PI*2);

[画像:path13]

In this case the rotation angle is zero so the horizontal and vertical radii are in their default orientation. If we specify a rotation angle of 45 degrees:

path1.ellipse(300,200,150,50,Math.PI/4,0,Math.PI*2);

The x radius is tilted at 45 degrees:

[画像:path14]

The only other thing to be aware of is that ellipse continues the current path. A line will be drawn from the current position to the starting point of the ellipse and the final point becomes the starting point of the rest of the path.

[画像:largecover360]

In chapter but not in this extract

• The arcTo Function
• Bezier Curves
• Using SVG Paths
• Bezier and String Paths
• Creating Bezier Paths
• Using Multiple Paths
• Drawing Without Paths

Summary

• The fundamental way to draw on a canvas object is to define a path – an outline of a shape.

• Once you have a path you can use stroke, which draws a line along the path, or fill which fills the path with a solid color or pattern.

• You can avoid creating a path object by using the default Path object associated with the canvas. In most cases it is better to define path objects as these are reusable.

• The basic path creation methods are rect, arc, ellipse and two types of Bezier curve.

• You can also use the SVG path command which has many advantages. It is more like a mini-language for describing shapes.

• In many cases it is easier to use an application such as InkScape to draw paths and then transfer them to your program using an SVG path string.

• There are also a few methods that draw directly to the canvas without creating a Path or interacting with the default Path.

• The clearRect method clears the area to transparent black which is the default color for "background" pixels.

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>

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

pico book

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info