HTML and CSS Reference
In-Depth Information
All the magic is happening inside of the
setInterval
, which trig-
gers every 67/1000th of a second (since JavaScript measures
seconds by 1000 milliseconds; therefore 1000/15 = about 67, or
approximately 15fps), which should be good enough for faking
video playback. Once inside the
setInterval
, I'm looping over
the width of the canvas, incrementing by the size of the thumb-
nail I'm drawing so as to fi ll the canvas horizontally.
The mapping for the arguments to the
drawImage
method is
shown in
Figure 5.14
.
FIGURE 5.14
A visual
representation of arguments
passed to
drawImage
.
Using a simple crop for the height and width, and using the
shortest edge, I can then easily scale the crop to the thumbnail
size and let the canvas do all the hard work for me. The result:
Bruce bashing a banana across the top of my site (
Figure 5.15
).
FIGURE 5.15
An animated
banner across my site using
canvas and video.
