HTML and CSS Reference
In-Depth Information
This leads to a call to the
flipback
function in 1,000 milliseconds (1 second). The function
flipback
then
uses the
matched
variable to determine whether to redraw card backs or erase the cards by drawing
rectangles with the table background color at the appropriate card locations.
You can use
setTimeout
to set up any individual timed events. You need to specify the time interval and
the function you want invoked when the interval expires. Remember that the time unit is milliseconds.
Drawing text
HTML5 includes a mechanism for placing text on the canvas. This provides a much more dynamic, flexible
way to present text than previous versions. You can create some good effects by combining text
placement with the drawing of rectangles, lines, arcs, and images weve already demonstrated. In this
section, well outline the steps for placing text in a canvas element, and well include a short example that
you can try. If you want, skip ahead to the “Building the Application” section to view the complete
description of the code that produces what you see in Figures 5-5 through 5-8 for the photos version of the
memory game.
To put text on the canvas, we write code that sets the
font,
and then we use
fillText
to draw a string of
characters starting at a specified x-y location. The following example creates words using an eclectic set
of fonts (see the caution note later in the section).
<html>
<head>
<title>Fonts</title>
<script type="text/javascript">
var ctx;
function init(){
ctx = document.getElementById('canvas').getContext('2d');
ctx.font="15px Lucida Handwriting";
ctx.fillText("this is Lucida Handwriting", 10, 20);
ctx.font="italic 30px HarlemNights";
ctx.fillText("italic HarlemNights",40,80);
ctx.font="bold 40px HarlemNights"
ctx.fillText("HarlemNights",100,200);
ctx.font="30px Accent";
ctx.fillText("Accent", 200,300);
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="900" height="400">
Your browser doesn't support the HTML5 element canvas.
</canvas>
</body>
</html>
This HTML document produces the screenshot shown in Figure 5-9.
