HTML canvas setTransform () method
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:
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"
Browser Support
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