HTML and CSS Reference
In-Depth Information
gradient
.
addColorStop
(
tempStopPercent
,
tempColor
);
tempStopPercent
+=
.
015
;
iif
(
tempStopPercent
>
1
) {
tempStopPercent
=
0
;
}
tempColorStop
.
stopPercent
=
tempStopPercent
;;
colorStops
[
i
]
=
tempColorStop
;
}
Inreality,thegradientisnotbeing“animated”;wearejustchangingthelocationofeachcolor
bychanging thegradient
colorStop
percentage. However,theeffect isthesame. Itlookslike
the colors are cycling.
Finally, we display the text using the gradient as the color for
fillStyle
:
context
.
fillStyle
=
gradient
;
context
.
fillText
(
message
,
xPosition
,
yPosition
);
Toseetheanimationinaction,typeinthefollowingcodeorload
CH3EX4.html
intoyourweb
browser.
Example 3-2
provides the full code for the color cycle example.
Example 3-2. Color cycle
<!doctype html>
<html
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH.3 EX. 4: Color Cycle
</title>
</title>
<
script src
=
"modernizr.js"
><
/script>
<
script type
=
"text/javascript"
>
window
.
addEventListener
(
"load"
,
eventWindowLoaded
,
false
false
);
function
function
eventWindowLoaded
() {
canvasApp
();
}
function
function
canvasSupport
() {
return
return
Modernizr
.
canvas
;
}
function
function
canvasApp
() {
iif
(
!
canvasSupport
()) {
return
return
;
}
