HTML canvas transform () method
Examples
Draw a rectangle by transform () to add a new transformation matrix, again draw a rectangle, add a new transformation matrix, and then draw a rectangle again. Please note that whenever you call transform (), it will be the first to build a transformation on the 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"
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome and Safari support transform () 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.
transform () method replaces the current transformation matrix. It is a matrix operation described below to the current transformation matrix:
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
In other words, transform () allows you to zoom, rotate, move and tilt the current environment.
Note: This conversion will only affect the transform () method is called after the drawing.
Note: The behavior transform () method with respect to the other converted by rotate (), scale (), translate () or transform () completed.For example: If you have already set into the drawing twice, then transform () method will magnify the drawing, your drawing will eventually be enlarged to four times.
Tip: Check out setTransform () method, which does not occur relative to other transform behavior.
| JavaScript syntax: | context .transform (a, b, c, d, e, f); |
|---|
Parameter Value
| 参数 | 描述 |
|---|---|
| a | 水平缩放绘图。 |
| b | 水平倾斜绘图。 |
| c | 垂直倾斜绘图。 |
| d | 垂直缩放绘图。 |
| e | 水平移动绘图。 |
| f | 垂直移动绘图。 |