Arc
Draw an Arc by providing its center co-ordinates, radius, start and end angle.
An arc is a portion of the circumference of a circle.
You can change all the basic properties like stroke and fill and fill-type.
Syntax
new arc(cx, cy, rx, ry, start_angle, end_angle, fill_type, fill, fill_opacity, stroke, stroke_width);
Parameters
cx | Number : x-coordinate of the center |
cy | Number : y-coordinate of the center |
rx | Number : length of semi-horizontal axis of the arc |
ry | Number : length of semi-vertical axis of the arc |
start_angle | Number : angle in radians at which the arc starts |
end_angle | Number : angle in radians at which the arc ends |
fill_type | 'pie', 'chord', 'open' : fill type of the arc |
fill | Color : fill color of the arc |
fill_opacity | Number [0 to 1] or percentage: fill opacity of the arc |
stroke | Color : stroke color of the arc |
stroke_width | Number : stroke width of the arc |
Example
new arc(WIDTH/2-150, HEIGHT/2, 90, 90, 0, 2*PI/3, "pie", "#695fe6", 0.3, "#44d", 2);
new arc(WIDTH/2, HEIGHT/2, 90, 90, 0, 2*PI/3, "chord", "#695fe6", 0.3, "#44d", 2);
new arc(WIDTH/2+150, HEIGHT/2, 90, 90, 0, 2*PI/3, "open", "#695fe6", 0.3, "#44d", 2);
t=0;
function draw(){
clearCanvas();
new arc(WIDTH/2-50, HEIGHT/2, 90,90, 0, t, "pie", "#695fe6", 0.3, "#44d", 2);
t+=0.01;
if(t>2*PI){
t=0;
}
requestAnimationFrame(draw);
};