HTML and CSS Reference
In-Depth Information
Figure 2-14. The newly translated point
Figure 2-15. Drawing with a translated point
In summary, we needed to change the point of origin to the center of our square so that it
would rotate around that point. But when we draw the square, we need our code to act as
though the (125,125) point is actually (0,0). If we had not translated the origin, we could have
used the (125,125) point as the center of our square (as in Figure 2-14 ) . Example 2-9 demon-
strates how this works, creating the result shown in Figure 2-16 .
Example 2-9. Rotation around the center point
function
function drawScreen () {
//draw black square
context . fillStyle = "black" ;
context . fillRect ( 20 , 20 , 25 , 25 );
//now draw a red square
context . setTransform ( 1 , 0 , 0 , 1 , 0 , 0 );
var
var angleInRadians = 45 * Math . PI / 180 ;
var
var x = 100 ;
var
var y = 100 ;
var
var width = 50 ;
Search WWH ::




Custom Search