spiralIcon

JSGS Shapes

TNTGradient

Your browser does not support HTML5 Canvas
Notes:

A gradient is a smooth transition from one color to another in a particular number of steps.

TNTGradient Features and Usage:
Primary Attributes:

3 Parameters:

  • a TNTLine with a given starting color
  • numSteps: an integer number of steps needed to reach the end (a bunch of TNTLines 'glued together')
  • a TNTStroke: to set the end color
To Create:

The example above was created by:

//designer color:
var tangerine = new TNTColor(250, 50, 5, "tangerine");
//designer strokes (needed the color first)
//default strokes are .2 in thickness
var tangerineStroke = new TNTStroke(tangerine, .5);
var ptA = new TNTPoint(-15, 3);
var ptB = new TNTPoint(9, -10);
var lineAB = new TNTLine(ptA, ptB, tangerineStroke);
var myGradient = new TNTGradient(lineAB, 25, blackStroke);
To Draw: myGradient.drawTNTGradient(context);
Comments: The example above showed how to create our custom tangerine color. Visit Heath B.'s Color Picker saga to get the color ingredients for any color you'd like to create!
Even More:

You may have to 'fiddle' with the number of steps to get the desired thickness