HTML and CSS Reference
In-Depth Information
drawScreen();
}
function fillTypeChanged(e) {
var target = e.target;
fillType = target.value;
drawScreen();
}
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.
Pattern
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);
gradient.addColorStop(0,textFillColor);
gradient.addColorStop(.6,textFillColor2);
tempColor = gradient;
} else if (fillType == "radialGradient") {
var gradient = context.createRadialGradient(xPosition, yPosition,
fontSize, xPosition+textWidth, yPosition, 1);