HTML and CSS Reference
In-Depth Information
The method defined will draw a rectangle within the current context. Next, you
will need to create a method to draw the play button.
Drawing the Play Icon
The play button is slightly more complex. To draw the play button you will need
to drop down to drawing paths on the context.
In order to draw paths, you use the
moveTo
and
lineTo
methods. These methods
allow you to move to a certain point without drawing a line, and draw a line
between two points.
app.playButton = function(id, track){
...
this.drawPlay = function(){
var width = 20,
height = 20,
x = canvas.center.x - (width / 2),
y = canvas.center.y - (height / 2);
context.beginPath();
context.moveTo(x, y);
context.lineTo(x + width, y + (height / 2));
context.lineTo(x, (y + height))
context.fillStyle = '#A0A0A0';
context.fill();
};
}
To begin with, you set the
width
and the
height
of the play icon to
20
(i.e., 20px
× 20px). You then set the center point to be half of the width of the canvas,
minus half of the width of the play button. You also do the same for the y axis,
just as you did for the stop icon.
In order to draw the play button, you will essentially premap three points on the
canvas to draw lines from and to. Figure 7-8 shows the approximate
coordinates for this on a 20px × 20px drawing context.