HTML and CSS Reference
In-Depth Information
Arcs
There are four functions we can use to draw arcs and curves onto the canvas. An arc can be a
complete circle or any part of a circle.
context.arc()
Here is in action:
context . arc ( x , y , radius , startAngle , endAngle , anticlockwise )
The x and y values define the center of our circle, and the radius will be the radius of the
circle upon which our arc will be drawn. startAngle and endAngle are in radians, not de-
grees. anticlockwise is a true or false value that defines the direction of the arc.
For example, if we want to draw a circle with a center point at position 100,100 and with
a radius of 20, as shown in Figure 2-4 , we could use the following code for the contents of
drawScreen() :
context . arc ( 100 , 100 , 20 , ( Math . PI / 180 ) * 0 , ( Math . PI / 180 ) * 360 , false
false );
Example 2-4 illustrates the code necessary to create a simple circle.
Example 2-4. A circle arc
function
function drawScreen () {
context . beginPath ();
context . strokeStyle = "black" ;
context . lineWidth = 5 ;
context . arc ( 100 , 100 , 20 , ( Math . PI / 180 ) * 0 , ( Math . PI / 180 ) * 360 , false
false );
//full circle
context . stroke ();
context . closePath ();
}
Search WWH ::

Custom Search