Manuale di riferimento HTML

Completo elenco dei tag HTML

Metodo transform() del canvas HTML

transform() è il metodo utilizzato dall'API Canvas 2D per sovrapporre più volte la trasformazione corrente, la matrice è descritta dai parametri del metodo. Puoi ingrandire, ruotare, spostare e inclinare il contesto.

Manuale di riferimento HTML canvas

Esempio online

Disegna un rettangolo, usa transform() per aggiungere una nuova matrice di trasformazione, disegna di nuovo il rettangolo, aggiungi una nuova matrice di trasformazione e disegna di nuovo il rettangolo. Nota che ogni chiamata a transform() si basa sulla matrice di trasformazione precedente:

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo del metodo transform() su HTML canvas - Guida di base (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta l'etichetta HTML5 canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle="green";
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);
</script>
</body>
</html>

Prova a vedere ‹/›

Compatibilità del browser

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano transform() Metodi.

Attenzione:Internet Explorer 8 e le versioni precedenti non supportano l'elemento <canvas>.

Definizione e uso

Ogni oggetto sulla gomma ha una matrice di trasformazione corrente.

Il metodo transform() sostituisce la matrice di trasformazione corrente. Moltiplica la 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 zoommare, ruotare, muovere e inclinare l'ambiente attuale.

Attenzione:Questa trasformazione influenzerà solo il disegno dopo la chiamata al metodo transform().

Attenzione:Il comportamento del metodo transform() rispetto alle altre trasformazioni effettuate da rotate(), scale(), translate() o transform(). Ad esempio: se hai già impostato il disegno su raddoppiare, il metodo transform() moltiplicherà il disegno per due, e il tuo disegno finale sarà ingrandito di quattro volte.

Suggerimento:Vedere setTransform() Metodo che non si comporterà in relazione ad altre trasformazioni.

Sintassi JavaScript:	context.transform(a,b,c,d,e,f);

Valore del parametro

Parametro	Descrizione
a	Zoom orizzontale di disegno.
b	Inclinazione orizzontale di disegno.
c	Inclinazione verticale di disegno.
d	Zoom verticale di disegno.
e	Movimento orizzontale di disegno.
f	Movimento verticale di disegno.

Manuale di riferimento HTML canvas

HTML: <template> etichetta