HTML and CSS Reference
In-Depth Information
• Radius—thesizeofthecircle.
• startAngle—thestartpointofthearc.
• endAngle—theendpointofthearc.
• anticlockwise—aBooleanvaluethatdictatesthedirection
the circle is drawn.
The following code describes the structure of an arc:
context.arc(260,260,250,0,7,true);
Figure 3.33 shows the circle as it is drawn on the page.
The following code embeds the Arc method and instructions
into a CANVAS drawing.
Figure 3.33
The Arc method
allows you to draw circles.
<!DOCTYPE html>
<html>
<head>
<title>Canvas - Creating a Circle</title>
<script type=”text/javascript”>
window.onload = function() {
var drawingCanvas = document.getElementById
('myCircle');
if(drawingCanvas && drawingCanvas.
getContext) {
var context = drawingCanvas.getContext('2d');
context.strokeStyle = “yellow”;
context.fillStyle = “red”;
context.lineWidth = 20;
context.beginPath();
context.arc(260,260,250,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
}
}
</script>
</head>
<body>
<canvas id=”myCircle” width=”550” height=”550”>
</canvas>
</body>
</html>
Figure 3.34 illustrates how you can add color to your circles.
In addition to the Arc method you also can add Bezier and
quadratic curves, both of which are mathematical calcula-
tions for creating an image. Bezier curves were developed by
French mathematician Pierre Bezier in 1962. A Bezier curve
is calculated from a parametric curve describing a parabola.
Figure 3.35 shows the four points used to create a Bezier
curve.
Figure 3.34
The Arc method can
be controlled visually with the
same controls you use for other
CANVAS drawing methods.
