Latest web development tutorials

HTML canvas setTransform () method

HTML canvas Reference Manual HTML canvas Reference Manual

Examples

Draw a rectangle by setTransform () reset and create a new transform matrix, draw a rectangle again, reset and create a new transformation matrix, and then draw a rectangle again. Please note that whenever you call setTransform (), which resets before a transformation matrix and then build a new matrix, in the example below, the red rectangle is not displayed because it is below 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"

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome and Safari support setTransform () method.

Note: 8 and earlier versions of Internet Explorer do not support the <canvas> element.

Definition and Usage

Each object on the canvas has a current transformation matrix.

setTransform () method to the current transformation matrix Resets the matrix, and then run with the same parameters the Transform () .

In other words, setTransform () allows you to zoom, rotate, move and tilt the current environment.

Note: This conversion will only affect setTransform () method is called after the drawing.

JavaScript syntax: context .setTransform (a, b, c, d, e, f);

Parameter Value

参数 描述
a 水平缩放绘图。
b 水平倾斜绘图。
c 垂直倾斜绘图。
d 垂直缩放绘图。
e 水平移动绘图。
f 垂直移动绘图。

HTML canvas Reference Manual HTML canvas Reference Manual