spiralIcon

JSGS Shapes

TNTEllipse

Your browser does not support HTML5 Canvas
Notes:

An ellipse is an oval. We used the mathematical definition of an ellipse, iterated over small increments, to create the shape. If increments are larger, the image evolves to a angular-type shape.

The equation of an ellipse is: ellipse eqn

TNTEllipse Features and Usage:
Primary Attributes:

7 Parameters:

  • center: TNTPoint
  • width: a decimal (known as a 'double' in code)
  • height: also a decimal ('double')
  • fillColor: TNTColor (can be null for a framework image)
  • borderColor: a TNTStroke: to set the
    border color as well as the thickness of the sides
  • numberOfSteps: an integer that 'digitizes' the shape by breaking it down into a number of segments. The larger this value, the more smooth the figure.
  • rotn: (in degrees, about the center); Positive angles are counter-clockwise; negative angles are clockwise
To Create:

The examples above were created by:

//origin is already defined; 
//you can piggyback on it to make 
//another variable
var center = origin; 
var radius = 10;
var ptC = new TNTPoint(-5, 12);

//this is another way of changing 
//the stroke thickness;
blueStroke.setStrokeLineWidth(1);   
//easier way to set the stroke thickness
//blueStroke.lineWidth = 1;			
var myEllipse = new TNTEllipse(center, 18, 
    12, green, blueStroke, 200, 30);
myEllipse.drawTNTEllipse(context);

var lemon = new TNTEllipse(ptC, 8, 
    4, yellow, null, 5, 0);
lemon.showPoints = true;
lemon.showCenter = true;
lemon.drawTNTEllipse(context);
To Draw: myEllipse.drawTNTEllipse(context);
Comments:

Set width = height for a circle