HTML and CSS Reference
In-Depth Information
shape. You can change the
startx
or
starty
values and it will always draw an
equilateral triangle at that position.
With the icons created, it's now time to set up the playback head. The playback
head is simply a circle that gradually opens. Below the semicircle is another
circle with a contrasting color to help distinguish the progress of the audio
playback, as shown in Figure 7-9.
Figure 7-9.
The playback head
Drawing the Playback Head
The problem with Canvas is that you cannot animate each shape on its own.
Moving or animating Canvas elements requires a complete redraw of the
canvas. Animating in Canvas requires keeping track of each object's state in
JavaScript and then rendering it with each call to
draw
. It's a long and laborious
process, but with the correct implementation, it can be less time consuming..
To track the progress of the track, you first need to work out its current progress
as a percentage.
