HTML and CSS Reference
In-Depth Information
The next step is to draw the circle that will provide the background of the play
button. Drawing a full circle and filling it with the color black achieve this.
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, false);
context.fill();
};
}
The next step is to draw the circle with no fill and apply a stroke to it to provide
the background that will be revealed as the play head moves.
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();
