HTML and CSS Reference
In-Depth Information
var
var height = 50 ;
context . translate ( x + . 5 * width , y + . 5 * height );
context . rotate ( angleInRadians );
context . fillStyle = "red" ;
context . fillRect ( - . 5 * width , - . 5 * height , width , height );
}
Figure 2-16. Rotation around the center point
Let's look at one final rotation example. Example 2-10 takes Example 2-9 and simply adds
four separate 40×40 squares to the canvas, rotating each one slightly. The result is shown in
Example 2-10. Multiple rotated squares
function
function drawScreen () {
//now draw a red square
context . setTransform ( 1 , 0 , 0 , 1 , 0 , 0 );
var
var angleInRadians = 45 * Math . PI / 180 ;
var
var x = 50 ;
var
var y = 100 ;
var
var width = 40 ;
var
var height = 40 ;
context . translate ( x + . 5 * width , y + . 5 * height );
context . rotate ( angleInRadians );
context . fillStyle = "red" ;
context . fillRect ( - . 5 * width , - . 5 * height , width , height );
context . setTransform ( 1 , 0 , 0 , 1 , 0 , 0 );
var
var angleInRadians = 75 * Math . PI / 180 ;
var
var x = 100 ;
var
var y = 100 ;
var
var width = 40 ;
var
var height = 40 ;
context . translate ( x + . 5 * width , y + . 5 * height );
context . rotate ( angleInRadians );
Search WWH ::

Custom Search