HTML canvas transform()Method
Example
Draw a rectangle, add a new transformation matrix with transform(), draw the rectangle again, add a new transformation matrix, and then draw the rectangle again. Note that whenever you call transform(), it builds on the previous transformation matrix:
JavaScript：
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
Try it Yourself »
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome and Safari support the transform() method.
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
Definition and Usage
Every object on the canvas has a current transformation matrix.
The transform() method replaces the current transformation matrix. It operates on the current transformation matrix with the matrix described below:
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
In other words, transform() allows you to scale, rotate, move and skew the current context.
Note:The transformation only affects drawings made after the transform() method is called.
Note:The behavior of the transform() method is relative to other transformations performed by rotate(), scale(), translate() or transform(). For example: If you have already set the drawing to be twice the size, the transform() method will double the drawing, and your drawing will eventually be four times larger.
Tip:Please seesetTransform()the method, which does not behave relative to other transformations.
| JavaScript Syntax: | context.transform(a,b,c,d,e,f); |
|---|
Parameter Values
| Parameter | Description |
|---|---|
| a | Scale the drawing horizontally. |
| b | Skew the drawing horizontally. |
| c | Skew the drawing vertically. |
| d | Scale the drawing vertically. |
| e | Move the drawing horizontally. |
| f | Move the drawing vertically. |
HTML canvas Reference Other Extensions