spiralIcon

JSGS Shapes

TNTStar

Your browser does not support HTML5 Canvas
Notes:

Astute guests will recognize a 'TNTStar' as a polygon, and that's correct, but it was handy to have a separate engine to make stars with a center, and number of rays and radii for the outer and inner lengths of those rays. Fill and stroke colors are again available, along with the ability to hide or show vertices.

Above, two types of stars are shown: one, traditional, the other more 'spikey.'

TNTStar Features and Usage:
Primary Attributes:

7 Parameters:

  • center: TNTPoint
  • numberOfRays: an integer ≥ 3
  • outerRadius: a 'double'; the distance from the center to a 'vertex' of the star
  • innerRadius: also a 'double'; the distance from the center to a concave vertex
  • fillColor: TNTColor as fcolr
  • borderStroke: a TNTStroke: to set the border color
  • rotn: a 'double' that rotates the shape about its center. rotn > 0 ==> counter-clockwise; rotn < 0 ==> clockwise
To Create:

The yellow TNTStar above was created by:

var myStar1 = new TNTStar(new TNTPoint(0, 0), 5, 20, 8, yellow, blackStroke, 18);
myStar1.showCenter = true;
myStar1.showPoints = true;
myStar1.drawTNTStar(context);

The white 'spikey' TNTStar was created by:

var myStar2 = new TNTStar(new TNTPoint(0, 0), 10, 8, 1, offWhite, blackStroke, 18);
myStar2.showCenter = true;
myStar2.showPoints = false;
myStar2.drawTNTStar(context);
To Draw: 
myStar1.drawTNTStar(context);
Comments:

Imagine the interesting designs that can be made by utilizing shapes that use the canvas's background color. Here's an example.
Even More: