HTML and CSS Reference
In-Depth Information
If loadCount is equal to or greater than itemsToLoad , we call canvasApp() to start the ap-
function itemLoaded () {
loadCount ++ ;
iif ( loadCount >= itemsToLoad ) {
canvasApp ();
Placing the buttons
We need to set some variables in canvasApp() that will represent the locations of the three
and height as the variables bW and bH . All the images in the videobuttons.png tile sheet are
32×32 pixels, so we will set bW and bH accordingly. Then we proceed to create variables that
represent the x and y locations of each button: playX , playY , pauseX , pauseY , stopX , and
stopY . We could use literal values; however, these variables will make a couple of the more
complicated calculations easier to swallow:
var bW = 32 ;
var bH = 32 ;
var playX = 190 ;
var playY = 300 ;
var pauseX = 230 ;
var pauseY = 300 ;
var stopX = 270
var stopY = 300 ;
In the drawImage() function, we need to test for the current state of the playing video and
render the buttons accordingly. For this application, we will use the paused state of the video
object's attribute to render the buttons properly in their “up” or “down” states.
When a video first loads on the page and is not yet playing, its paused attribute is set to true .
When a video is playing, its paused attribute is set to false . Knowing this, we can create the
actions for these simple buttons.
First, if we know that the video is not in a paused state, it must be playing, so we display the
“down” version of the play button. The “down” position is in the second row on the tile sheet
in Figure 6-11 . The third parameter of the call to the drawImage() function is 32 because that
is where the y position of the image we want to display starts on the tile sheet. If paused is
true ,it means that the video is not playing, so we display the “up” version ofthe play button.
It starts at y position 0 :
Search WWH ::

Custom Search