HTML and CSS Reference
In-Depth Information
The
translate(
x
,
y
)
function is a handy function to use to change the origin from
(0,0) to another location in the drawing. The following example moves the origin to
(100,100). Then, when the start coordinates of the rectangle are specified at (0,0), it really
starts at (100,100).
context.translate(100,100);
context.fillRect(0,0,100,100);
A simple example of moving some boxes around is shown here:
O
NLINE
http://htmlref.com/ch2/canvastranslate.html
All the methods presented so far are conveniences to help us use an underlying
transform matrix associated with paths. All paths have an identity matrix as their default
transform. As an identity, this transform matrix does nothing, but it is certainly possible to
adjust this matrix in a few ways. First, it can be directly modified by calling
setTransform
(m11,m12,m21,m22,dx,dy)
, which resets the matrix to the identity matrix and then
calls
transform()
with the given parameters. Or you can do this directly by using
transform(m11,m12,m21,m22,dx,dy)
, which multiplies whatever the current matrix is
with the matrix defined by
m11 m21 dx
m12 m22 dy
0 0 1
The problem with the method should be obvious: unless you understand more than a
bit about matrix math, this can be a bit daunting to use. On the bright side, with the
method, you can do just about anything you want. Here a simple example skews and
moves some simple rectangles. The result is shown in Figure 2-5.
