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.
Search WWH ::

Custom Search