canvas HTML transform () metodo
HTML Manuale di tela di riferimento
Esempi
Disegnare un rettangolo transform () per aggiungere una nuova matrice di trasformazione, di nuovo disegnare un rettangolo, aggiungere una nuova matrice di trasformazione, e quindi disegnare un rettangolo di nuovo. Si prega di notare che ogni volta che si chiama transform (), sarà il primo a costruire una trasformazione sulla matrice:
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);
Prova »
Supporto per il browser
Internet Explorer 9, il supporto per Firefox, Opera, Chrome e Safari trasformare il metodo ().
Nota: 8 e versioni precedenti di Internet Explorer non supportano l'elemento <canvas>.
Definizione e utilizzo
Ogni oggetto sulla tela ha una matrice di trasformazione in corso.
transform () metodo sostituisce la matrice di trasformazione in corso. Si tratta di un funzionamento della matrice descritta di seguito per la matrice di trasformazione corrente:
| un | c | e |
| B | d | f |
| 0 | 0 | 1 |
In altre parole, transform () permette di zoomare, ruotare, spostare e inclinare l'ambiente corrente.
Nota: Questa conversione avrà effetto solo il metodo transform () viene chiamato dopo il disegno.
Nota: Il comportamento trasformata () metodo rispetto all'altro convertito da rotate (), scala (), translate () o trasformare () completata.Per esempio: se è già stato impostato nel disegno due volte, poi transform () metodo si ingrandire il disegno, il disegno finirà per essere ampliato a quattro volte.
Partenza: Tip setTransform () metodo, che non si verifica rispetto ad altri comportamenti trasformare.
| sintassi JavaScript: | contesto .transform (a, b, c, d, e, f); |
|---|
Valore parametro
| 参数 | 描述 |
|---|---|
| a | 水平缩放绘图。 |
| b | 水平倾斜绘图。 |
| c | 垂直倾斜绘图。 |
| d | 垂直缩放绘图。 |
| e | 水平移动绘图。 |
| f | 垂直移动绘图。 |
HTML Manuale di tela di riferimento