Your browser does not support HTML5 Canvas

Notes:

Take a few sectors, vary their radii in an alternating fashion and automate the process with a loop and you get a bunch of sector-petals...the TNTSpetal! You're not imagining it: yes, we have a TNTSector shape.

TNTSpetal Features and Usage:
Primary Attributes:

7 Parameters:

  • center: TNTPoint
  • largeRadius: a positive real number
  • numPetals: a positive integer
  • fillColor: TNTColor (can be null for a framework image)
  • borderStroke: a TNTStroke: to set the border color as well as the thickness of the sides
  • ratioOfSmallToLargeRadius: a decimal in (0, 1]
  • rotationDeg: a 'double' that rotates the image about its center.
    rotn > 0 ==> counter-clockwise; rotn < 0 ==> clockwise
To Create:

The example above was created by:

purpleStroke.lineWidth = .5;
var mySectorPetal = new TNTSpetal(origin, 18, 8, yellow, purpleStroke, .5, 0);
mySectorPetal.drawTNTSpetal(context);
                                    
To Draw: mySectorPetal.drawTNTSectorPetal(context);