HTML and CSS Reference
In-Depth Information
canvas.center.x - 20, 0, endradians);
context.stroke();
/**
* Decide whether to draw the play or the stop button
*/
switch(track.getState()){
case track.state.PAUSED:
case track.state.STOPPED:
this.drawPlay();
break;
case track.state.PLAYING:
this.drawStop();
break;
}
};
}
As you can see, if the track state is paused or stopped, the play icon is drawn; if
the track is playing, the stop icon is drawn.
The full code for the
playButton
follows. You will notice that at the bottom of the
code sample, there is an event listener to bind the touch event for the canvas.
This will trigger the
togglePlay()
method.
app.playButton = function(id, track){
var canvas = document.getElementById(id),
context = canvas.getContext('2d'),
track = track,
_self = this;
canvas.center = {
x: (canvas.offsetHeight / 2),
y: (canvas.offsetHeight / 2)
};
canvas.dimensions = {
width: (canvas.offsetWidth),
height: (canvas.offsetHeight)
};
/**
* Track callback methods
*/
track.callbacks.didUpdateTime = function(time){
_self.draw();
};
