Metodo di trasformazione del canvas
Definizione e uso
Ogni oggetto sul canvas ha una matrice di trasformazione corrente.
transform() Metodo sostituisce la matrice di trasformazione corrente. Opererà sulla matrice di trasformazione corrente con la matrice descritta di seguito:
a c e b d f 0 0 1
In altre parole, transform() ti permette di ingrandire, ruotare, muovere e inclinare l'ambiente corrente.
Nota:Questa trasformazione influenzerà solo il disegno successivo al metodo transform() chiamato.
Nota:Il comportamento del metodo transform() rispetto a rotate(),scale(),translate() o altre trasformazioni eseguite con transform(). Ad esempio: se hai già impostato il disegno a due volte di ingrandimento, il metodo transform() ingrandirà il disegno di altre due volte, quindi il disegno finale sarà ingrandito di quattro volte.
Suggerimento:Vedi anche setTransform() Metodo, che non si comporterà relativamente ad altre trasformazioni.
Esempio
Disegna un rettangolo; aggiungi una nuova matrice di trasformazione con transform() e disegna nuovamente il rettangolo; aggiungi un'altra matrice di trasformazione e disegna di nuovo il rettangolo. Nota che ogni volta che chiami transform(), costruisce sulla matrice di trasformazione precedente:
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);
语法
context.transform(a,b,c,d,e,f);
参数值
| 参数 | 描述 |
|---|---|
| a | 水平缩放绘图。 |
| b | 水平倾斜绘图。 |
| c | 垂直倾斜绘图。 |
| d | 垂直缩放绘图。 |
| e | 水平移动绘图。 |
| f | 垂直移动绘图。 |
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.
