HTML and CSS Reference
In-Depth Information
function fillTypeChanged(e) {
var target =;
fillType = target.value;
We need to add support to drawScreen() for this new functionality. First, we use the
measureText() method of the context to get the width of the text, which we will use to
create the gradients:
var metrics = context.measureText(message);
var textWidth = metrics.width;
Then, we need to decide how to format our “color” for the fillStyle or strokeStyle
of the context. In this instance, it can be a CSS color, a gradient, or an image pattern;
the list below provides more information.
Color fill
If we are doing a simple color fill, we operate just like in previous versions of Text
Arranger. All we need to do is make tempColor equal to the value of y .
Linear gradient
For the linear gradient, we need to decide what line we are going to create for the
gradient. Our line will start at the beginning of the text ( xPosition-textWidth/2
because the text uses the center alignment), and runs horizontally to the end of
the text ( textWidth ). We also add two color stops (at 0 and 60%)—the colors are
textFillColor1 and textFillColor2 .
Radial gradient
For the radial gradient, we are going to create a cone that starts at the center of the
text ( xPosition , yPosition ) with a radius the size of the font ( fontSize ). The cone
will extend horizontally the width of the text ( textWidth ) with a radius of 1.
For this option, we create a pattern using the pattern image variable we previously
created. We designate it to repeat so it will tile horizontally and vertically.
Here's the code:
var tempColor;
if (fillType == "colorFill") {
tempColor = textFillColor;
} else if (fillType == "linearGradient") {
var gradient = context.createLinearGradient(xPosition-
textWidth/2, yPosition, textWidth, yPosition);
tempColor = gradient;
} else if (fillType == "radialGradient") {
var gradient = context.createRadialGradient(xPosition, yPosition,
fontSize, xPosition+textWidth, yPosition, 1);
Search WWH ::

Custom Search