Star
Draw a Star by providing the x and y co-ordinates, the inner and outer radius . A Star is a type of non-convex polygon.
You can change all the basic properties like stroke and fill.
Syntax
new star(cx, cy, o_r, i_r, sides, rotation, fill, fill_opacity, stroke, stroke_width);
Parameters
cx | Number : The x co-ordinate of the center of the star. |
cy | Number : The y co-ordinate of the center of the star. |
o_r | Number : The Outer radius of the polygon. to be precise , its the distance between the center and the outer vertices. |
i_r | Number : The Inner radius of the polygon. to be precise , its the distance between the center and the inner vertices. |
sides | Number : The number of sides of the star. |
rotation | Number : The rotation of the star. |
fill | Color : fill color of the star |
fill_opacity | Number [0 to 1] or percentage: fill opacity of the star |
stroke | Color : stroke color of the star |
stroke_width | Number : stroke width of the star |
Example
new star(100, HEIGHT/2, 60, 10, 3, 0, "#695fe6", 0.3, "#44d", 2);
new star(240, HEIGHT/2, 60, 30, 4, 0, "#695fe6", 0.3, "#44d", 2);
new star(380, HEIGHT/2, 60, 30, 5, 0, "#695fe6", 0.3, "#44d", 2);
new star(520, HEIGHT/2, 60, 30, 6, 0, "#695fe6", 0.3, "#44d", 2);
new star(660, HEIGHT/2, 60, 30, 15, 0, "#695fe6", 0.3, "#44d", 2);
var t=0;
function draw(){
clearCanvas();
new star(100, HEIGHT/2, 60, 10, 3, t, "#695fe6", 0.3, "#44d", 2);
new star(240, HEIGHT/2, 60, 30, 4, t, "#695fe6", 0.3, "#44d", 2);
new star(380, HEIGHT/2, 60, 30, 5, t, "#695fe6", 0.3, "#44d", 2);
new star(520, HEIGHT/2, 60, 30, 6, t, "#695fe6", 0.3, "#44d", 2);
new star(660, HEIGHT/2, 60, 30, 15, t, "#695fe6", 0.3, "#44d", 2);
t+=0.01;
requestAnimationFrame(draw);
};