siteIcon

Tech Novice Tools

JS Grafix Sandbox

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

TNT Star

Your browser does not support HTML5 Canvas
Notes:

Astute guests will recognize a 'Star' 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.'

Features and Usage:

Primary Attributes:

7 parameters:
center(TNTPoint), numberOfRays(integer), outerRadius(double), innerRadius(double), fillColor(TNTColor), borderColor(TNTStroke), rotationInDegrees(double, about it's center: + is counter-clockwise, - is clockwise)
To Create:

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

var myStar2 = new TNTStar(new TNTPoint(0, 0), 10, 8, 1, offWhite, blackStroke, 18);
myStar2.showCenter = true;
myStar2.showPoints = false;

To Draw:

myStar1.drawTNTStar(context);
myStar2.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.