HTML canvas setTransform()Method

Canvas 对象参考手册Canvas Object

Examples

Draw a rectangle, reset and create a new transformation matrix with setTransform(), draw a rectangle again, reset and create a new transformation matrix, then draw the rectangle once more. Note that every time 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 beneath the blue rectangle:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript：

var c=document.getElementById("myCanvas");
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 ExplorerFirefoxOperaGoogle ChromeSafari

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 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 drawings made after the setTransform() method call.

JavaScript Syntax: context.setTransform(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.

Canvas 对象参考手册Canvas Object

Other Extensions