HTML and CSS Reference
In-Depth Information
Figure 7-6.
The play (L) and pause (R) states of the custom video control using a CSS sprite
Scripted 2D Canvas API
Now let's look at something even more interactive. As you saw in Chapter 5, the
can-
vas
element does not have much that can be done to it purely with HTML, because it
has only two attributes, which simply specify the width and height of the canvas area.
The real power of
canvas
comes from manipulating the element from JavaScript. Re-
member, the canvas is a bitmap canvas, meaning it is essentially a blank image that we
can manipulate the pixels of through a set of drawing commands.
To work with the canvas, a particular "context" needs to be retrieved from the ele-
ment, which then can be used as the target of drawing operations. The context specifies
what kind of image we are dealing with. There are two choices available: a two-dimen-
sional or three-dimensional image.
Let's begin by hunting down the method for retrieving the context we will draw with.
4
First duplicate the
jstemplate
directory from the beginning of the chapter and re-
name it
canvas
. Modify the HTML in
index.html
to add a
canvas
element (and
some fallback content) in place of the paragraph of text:
__________
4
For the impatient, the method for retrieving a context is called getContext().
…
<body>
<canvas id="canvas" width="300" height="300">
Search WWH ::
Custom Search