Name
CRC.arcTo() — adds an arc, using two tangent lines and a radius
Synopsis
void arcTo(floatx1
, floaty1
, floatx2
, floaty2
, floatradius
)
Arguments
x1, y1
The coordinates of point P1
x2, y2
The coordinates of point P2
radius
The radius of the circle that defines the arc
Description
This method adds a straight line and an arc to the current subpath
and describes that arc in a way that makes it particularly useful for
adding rounded corners to polygons. The arc that is added to the path is
a portion of a circle with the specified
radius
. The arc has one point that is tangent
to the line from the current position to P1 and one point that is
tangent to the line from P1 to P2. The arc begins and ends at these two
tangent points and is drawn in the direction that connects those two
points with the shortest arc. Before adding the arc to the path, this
method adds a straight line from the current point to the start point of
the arc. After calling this method, the current point is at the endpoint
of the arc, which lies on the line between P1 and P2.
Example
Given a context object c
, you can draw a 100 ×
100 square with rounded corners (of varying radii) with code like
this:
c.beginPath(); c.moveTo(150, 100); // Start at the top middle c.arcTo(200,100,200,200,40); // Top edge and upper right c.arcTo(200,200,100,200,30); // Right edge and lower right c.arcTo(100,200,100,100,20); // Bottom and lower left c.arcTo(100,100,200,100,10); // Left and upper left c.closePath(); // Back to the starting point ...
Get Canvas Pocket Reference now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.