HTML and CSS Reference
In-Depth Information
Example 2-9. Rotation around the center point
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 angleInRadians = 45 * Math.PI / 180;
var x = 100;
var y = 100;
var width = 50;
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
Figure 2-17
.
Example 2-10. Multiple rotated squares
function drawScreen() {
//now draw a red square
context.setTransform(1,0,0,1,0,0);
var angleInRadians = 45 * Math.PI / 180;
var x = 50;
var y = 100;
var width = 40;
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);
