HTML canvas setTransform()Method
Examples
Draw a rectangle, use setTransform() to reset and create a new transformation matrix, draw the rectangle again, reset and create a new transformation matrix, then draw the rectangle again. Note that whenever you call setTransform(), it resets the previous transformation matrix and then builds a new matrix, so in the example below, the red rectangle will not be displayed because it is underneath the blue rectangle:
JavaScript：
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(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 setTransform() 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 setTransform() method resets the current transformation matrix to the identity matrix, and then runs transform() with the same parameters.transform()。
In other words, setTransform() allows you to scale, rotate, move, and skew the current environment.
Note:This transformation only affects drawing done after the setTransform() method is called.
| JavaScript Syntax: | context.setTransform(a,b,c,d,e,f); |
|---|
Parameter Values
| Parameter | Description |
|---|---|
| a | Scales the drawing horizontally. |
| b | Skews the drawing horizontally. |
| c | Skews the drawing vertically. |
| d | Scales the drawing vertically. |
| e | Moves the drawing horizontally. |
| f | Moves the drawing vertically. |
HTML canvas Reference Manual Other Extensions