arc method
[This documentation is preliminary and is subject to change.]
Adds points to a path that represents an arc.
  |
Syntax
var retval = CanvasRenderingContext2D.arc(x, y, radius, startAngle, endAngle, anticlockwise);Standards information
- HTML Canvas 2D Context, Section 9
Parameters
- x [in]
-
Type: float
The x-coordinate, in pixels, for the center point of the arc in relation to the upper-left corner of the canvas rectangle.
- y [in]
-
Type: float
The y-coordinate, in pixels, for the center point of the arc in relation to the upper-left corner of the canvas rectangle.
- radius [in]
-
Type: float
The radius or distance from the point (x,y) that the arc's path follows.
- startAngle [in]
-
Type: float
The starting angle, in radians, where 0 is at the 3 o'clock position of the arc's circle.
- endAngle [in]
-
Type: float
The ending angle, in radians.
- anticlockwise [in]
-
Type: BOOL
Return value
Type: HRESULT
This method can return one of these values.
| Return code | Description |
|---|---|
|
The operation completed successfully. |
|
The specified radius value is negative. |
Type: HRESULT
This method can return one of these values.
| Return code | Description |
|---|---|
|
The operation completed successfully. |
|
The specified radius value is negative. |
Remarks
If the startAngle and endAngle angles are equal, the arc method creates a circle. To convert degrees to radians use the following formula.
var radians = degrees * Math.PI/180
Examples
The following code example shows several different arcs.
<!DOCTYPE html> <html>
<head>
<script type="text/javascript">
function curves()
{
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
for(var i=0;i<2;i++) // Step through two rows.
{
for(var j=0;j<3;j++) // Step through three versions.
{
ctx.beginPath();
var x = 25+j*50; // The x-coordinate.
var y = 25+i*50; // The y-coordinate.
var radius = 20; // The arc radius.
var startAngle = 0; // The starting point on the circle.
var endAngle = Math.PI+(Math.PI*j)/2; // The end point on the circle.
var anticlockwise = i%2==0 ? false : true; // The direction of drawing.
ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise); // Create the arc path.
ctx.stroke(); // Display the work.
}
}
}
}// Curves
</script>
</head>
<body>
<canvas id="canvas" width="300" height="300">Sorry, canvas not supported</canvas>
<button onclick="curves();">Show arcs</button>
</body>
</html>
See also
Build date: 2/14/2012
