HTML and CSS Reference
In-Depth Information
Let's start with a simple translate transformation. This moves the origin
of the <canvas> element according to the x and y offsets you pass in as
arguments:
var img = document
.getElementById('myimage');
ctx.translate(120,20);
ctx.drawImage(
img, 10, 10, 118, 130
);
If you compare this example with the similar one in “Placing images”
without the transformation, you'll see you've basically moved the image
down and to the right. Not particularly useful when you could have
drawn the image there in the first place, but this technique would be
useful if you wanted to move a collection of objects around while keep-
ing their relative positions the same.
Next, let's try rotation:
var img =
document.getElementById('myimage');
ctx.rotate(Math.PI/4);
ctx.drawImage(img, 10, 10, 118, 130);
The rotate() method takes a value in radians and rotates the drawing
context by that angle. As with translate , the values you provide to the
drawImage() method are now relative to the transformation.
Search WWH ::




Custom Search