HTML and CSS Reference
In-Depth Information
per second = about 67, or approximately 15 fps—equally 25fps
would be 1000/25), which should be good enough for faking
video playback. Once inside the
setInterval
, I'll loop over the
width of the canvas, incrementing by the size of the thumbnail
I'm drawing to fill 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.
