siteIcon

Tech Novice Tools

JS Grafix Sandbox

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

TNT Arc

Your browser does not support HTML5 Canvas
Notes:

TNTArc is a portion of a circle. You must supply a center, a radius and a beginning and ending angle (in degrees) to get what you want. Positve angles are counter-clockwise as you learned (hopefully) in math class. This object allows you to use the function 'showCenter' which locates the arc's center. It's helpful to show this initially to position the arc where you want it.

It's worth experimenting with this TNTArc using Chrome's Developer Tools. The help section explains how to do this.

Features and Usage:

Primary Attributes:

5 parameters:
center(TNTPoint), radius(double), beginningAngle(double), endingAngle(double), borderColor(TNTStroke)

Positive angles are counter-clockwise
To Create:
(Example Above)

//designer colors
var gray = new TNTColor(200, 200, 200, "gray");
//designer strokes
var grayStroke = new TNTStroke(gray, .2);
//special points/components var center = new TNTPoint(1, 2);
center.factor = 100;
center.drawTNTPoint(myTNTCanvas, white);
var radius = 10;
var theta0 = 30;
var thetaf = 120;
//SohCahToa!
//show the lines that define the arc
var ptA = new TNTPoint(center.x + radius*Math.cos(theta0*Math.PI/180), center.y + radius*Math.sin(theta0*Math.PI/180));
ptA.factor = 100;
ptA.drawTNTPoint(myTNTCanvas, white);
var lineOA = new TNTLine(center, ptA, whiteStroke);
lineOA.drawTNTLine(context);

var ptB = new TNTPoint(center.x + radius*Math.cos(thetaf*Math.PI/180), center.y + radius*Math.sin(thetaf*Math.PI/180));
ptB.factor = 100;
ptB.drawTNTPoint(myTNTCanvas, gray);
var lineOB = new TNTLine(center, ptB, grayStroke);
lineOB.drawTNTLine(context);
var myArc = new TNTArc(center, radius, theta0, thetaf, magentaStroke);
myArc.accentColor = red;
myArc.showCenter = true;

To Draw:

myArc.drawTNTArc(context);

Comments:

Notice there is no 'fillColor' property for these puppies, but you can thicken the arc with the lineWidth property of the TNTStroke.
Even More:

Notice how we grabbed the center points x and y properties using the 'dot operator' (center.x, center.y) when we worked some SohCahToa magic to get the arc's beginning and ending points.