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.
 
Search WWH ::




Custom Search