javascript

Chapter 21: Upcoming API s
(continued)
context.arc(100, 100, 99, 0, 2 * Math.PI, false);
//draw inner circle
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2 * Math.PI, false);
//translate to center
context.translate(100, 100);
//rotate the hands
context.rotate(1);
//draw hour hand
context.moveTo(0,0);
context.lineTo(0, -85);
//draw minute hand
context.moveTo(0, 0);
context.lineTo(-65, 0);
}
//stroke the path
context.stroke();
Since the origin has already been translated to the center of clock, the rotation is applied from that point.
This means that the hands are both anchored at the center and then rotated around to the right. The
result is displayed in Figure 21 - 6 .
Figure 21-6
All of these transformations, as well as properties like fillStyle and strokeStyle , remain set on the
context until explicitly changed. Although there ’ s no way to explicitly reset everything to their default
values, there are two methods that can help keep track of changes. Whenever you want to be able to
return to a specific set of properties and transformations, call the save() method. Once called, this
method pushes all of the settings at the moment onto a stack for safekeeping. You can then go on to
make other changes to the context. When you want to go back to the previous settings, call the
690