HTML canvas setTransform() method
Definition and Usage
Each object on the canvas has a current transformation matrix.
setTransform() Method resets the current transformation matrix to the unit matrix and then runs with the same parameters transform().
In other words, setTransform() allows you to scale, rotate, move, and skew the current environment.
Huomautus:This transformation only affects the drawing after the setTransform() method call.
Example
Draw a rectangle, reset and create a new transformation matrix using setTransform(), draw a rectangle again, reset and create a new transformation matrix, and then draw a rectangle again. Please note that the red rectangle will not be displayed in the example below because it is under the blue rectangle: Whenever you call setTransform(), it resets the previous transformation matrix and then builds a new matrix, so the red rectangle will not be displayed below:
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);
Syntaksi
context.setTransform(a,b,c,d,e,f);
Parametrien arvot
| Parametrit | Kuvaus |
|---|---|
| a | Horisontaalinen pyörittäminen piirustuksessa. |
| b | Horisontaalinen vinoutuminen piirustuksessa. |
| c | Pystysuuntainen vinoutuminen piirustuksessa. |
| d | Pystysuuntainen skaalautuminen piirustuksessa. |
| e | Horisontaalinen liikkeellinen piirustus. |
| f | Pystysuuntainen liikkeellinen piirustus. |
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ä.
