javascript

Chapter 21: Upcoming API s
Transformations can be as simple or as complex as necessary. For example, it may be easier to draw the
hands on the clock in the previous example by translating the origin to the center of the clock and then
drawing the hands from there. Consider the following:
var drawing = document.getElementById(“drawing”);
//make sure < canvas > is completely supported
if (drawing.getContext){
var context = drawing.getContext(“2d”);
//start the path
context.beginPath();
//draw outer circle
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);
//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();
After translating the origin to (100,100), the center of the clock face, it ’ s just a matter of simple math to
draw the lines in the same direction. All math is now based on (0,0) instead of (100,100). You can go
further, moving the hands of the clock by using the rotate() method as shown here:
var drawing = document.getElementById(“drawing”);
//make sure < canvas > is completely supported
if (drawing.getContext){
var context = drawing.getContext(“2d”);
//start the path
context.beginPath();
//draw outer circle
(continued)
689