HTML canvas transform() method
Definition and Usage
Each object on the canvas has a current transformation matrix.
transform() Method replaces the current transformation matrix. It operates the current transformation matrix with the following matrix described:
a c e b d f 0 0 1
In other words, transform() allows you to scale, rotate, move, and tilt the current environment.
Huomautus:This transformation will only affect the drawing after the transform() method call.
Huomautus:The behavior of the transform() method is relative to rotate(),scale(),translate() or other transformations completed by transform(). For example: if you have already set the drawing to double, the transform() method will double the drawing, and your drawing will be quadrupled in the end.
Tip:Please see setTransform() Method, which does not behave relative to other transformations.
Example
Draw a rectangle; add a new transformation matrix using transform() and draw the rectangle again; add another transformation matrix and draw the rectangle again. Please note that each time you call transform(), it builds on the previous transformation matrix:
JavaScript:
var c=document.getElementById("myCanvas");
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);
Syntaksi
context.transform(a,b,c,d,e,f);
Parametrien arvot
| Parametrit | Kuvaus |
|---|---|
| a | Horisontaalinen skaalautuminen. |
| b | Horisontaalinen vinottaminen. |
| c | Pystysuuntainen vinottaminen. |
| d | Pystysuuntainen skaalautuminen. |
| e | Horisontaalinen liikkeiden piirtäminen. |
| f | Pystysuuntainen liikkeiden piirtäminen. |
Selaimen tuki
Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan selaimen version.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas> -elementtiä.
