HTML and CSS Reference
In-Depth Information
context.strokeStyle = "#A8A8A8";
context.arc(canvas.center.x, canvas.center.y,
canvas.center.x - 20, 0, endradians);
context.stroke();
};
}
The final step in this method is to decide whether to draw the stop or the play
icons on the button with every canvas redraw. This is achieved with a
switch
statement.
app.playButton = function(id, track){
...
this.draw = function(){
var percentage = 100 - ((track.getCurrentTime() / track.getLength()) *
100);
var endradians = (percentage * (2 / 100)) * Math.PI;
context.clearRect(0, 0, canvas.dimensions.width,
canvas.dimensions.height);
/**
* Draw the play button backdrop
*/
context.beginPath();
context.fillStyle = '#000000';
context.arc(canvas.center.x, canvas.center.y,
canvas.center.x - 10, 0, 2 * Math.PI);
context.fill();
/**
* Draw the background for the play head
*/
context.beginPath();
context.lineWidth = 5;
context.strokeStyle = "#FFFFFF";
context.arc(canvas.center.x, canvas.center.y,
canvas.center.x - 20, 0, 2 * Math.PI);
context.stroke();
/**
* Draw the progress head
*/
context.beginPath();
context.lineWidth = 5;
context.strokeStyle = "#A8A8A8";
context.arc(canvas.center.x, canvas.center.y,
