siteIcon

Tech Novice Tools

JS Grafix Sandbox

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

TNT CircleSegment

Your browser does not support HTML5 Canvas
Notes:

A circle segment is a shape formed by the intersection of an arc of circle and a chord connecting the endpoints of that arc.

The arc of circle is selected using 'thetaStart' and 'thetaEnd' referenced from a horizontal going through the center of the defining circle. (Positive angles are counter-clockwise).

In the picture above, the TNTCircleSegment is in orange, the defining TNTDisk is in white, with special points in black.

Features and Usage:

Primary Attributes:

6 parameters:
center(TNTPoint), radius(double), thetaStartDeg(double), thetaEndDeg(double), fillColor(TNTColor), borderColor(TNTStroke)
To Create: (See example above)

var baseDisk = new TNTDisk(center, 10, null, whiteStroke);
baseDisk.accentColor = black;
baseDisk.showCenter = true;
baseDisk.drawTNTDisk(context);
var ptA = new TNTPoint(-5 + 10*Math.cos(-40*Math.PI/180.0), -2 + 10*Math.sin(-40*Math.PI/180.0));
ptA.drawTNTPoint(myTNTCanvas, black);
var seg1 = new TNTLine(center, ptA, whiteStroke);
seg1.drawTNTLine(context);
var ptB = new TNTPoint(-5 + 10*Math.cos(30*Math.PI/180.0), -2 + 10*Math.sin(30*Math.PI/180.0));
ptB.drawTNTPoint(myTNTCanvas, black);
var seg2 = new TNTLine(center, ptB, whiteStroke);
seg2.drawTNTLine(context);
var myCircleSegment = new TNTCircleSegment(center, 10, -40, 30, orange, null);

To Draw:

myCircleSegment.drawTNTCircleSegment(context);
Comments:

When trying to design these, it helps to sketch the disk first, along with it's center. Starting and ending angles (in degrees) are measured from the horizontal, with positive angles going counter-clockwise, as in math class.

We showed this 'scaffolding' in the example above.
Even More: See how we used SohCahToa to get the two black points on the circle from the center and radius? Boy...we  ♥ you, trig!