HTML and CSS Reference
In-Depth Information
context.arc(canvas.center.x, canvas.center.y,
canvas.center.x - 20, 0, 2 * Math.PI);
context.lineWidth = 5;
context.strokeStyle = "#FFFFFF";
context.stroke();
};
}
Finally, it's a case of drawing the play head based on the track's current
playback position. The code is the same as that of drawing the background for
the play head, except the end angle is set to the
endradians
previously declared
in the code to represent the progress of the track.
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;
