Ci sono varie trasfomazioni che si possono applicare ad un elemento, si possono traslare, ruotare, scalare e per ognuna c'è una funzione specifica.
In alternativa, il context 2d ci fornisce di una funzionalità molto comoda che le racchiude tutte.

In verità le funzioni sono due, transform e setTransform che sono uguali e utilizzano gli stessi argomenti, si differnziano solo per una caratteristica:

• setTransform "resetta" tutte le trasformazioni fatte in precendenza, quindi non si hanno più bisogno di usare il salvamento e il ripripristono di stato. (ho dedicato un paragrafo alla spiegazioni del savataggio/ripristino stato in questo articolo)
• Mentre transform somma le varie trasformazioni.

Ad esempio se usiamo due traslation uguali che radoppiano gli oggetti sottostanti,questi verranno quadrupicati, invece se usassimo due setTransform gli oggetti subirebbero la trasformazione solo del secondo, perchè questo cancellerebbe gli effetti del primo, raddopiandoli.

Le due funzioni sono equivalenti, quindi le cose che vedremo sotto valgono anche per l'altra funzione.

ctx.setTransform(so, io, iv, sv, to, tv)

• so: scala, quindi, riduce o ingrandisce orizzontalmente
• io: inclina orizzontalmente
• iv: inclina verticalmente
• rv: scala, quindi, riduce o ingrandisce verticalmente
• to: trasla (muove) il canvas orizzontalmente
• tv: trasla il canvas verticalmente

Da come si può dedurre, nella descrizione degli argomenti si possono dividere per caratteristiche in tre coppie: scala, streccia, trasla.

Di default....
ctx.setTransform(1, 0, 0, 1, 0, 0);

SCALARE

Il primo so e il quarto sv argomenti allarga e rimpicciolisce il canvas.
Di default i valori sono settati entrambi a 1, quindi se volessimo ingrandila del doppio dovremmo passargli 2 come valore o se volessimo dimezzare le sue dimensioni gli passeremmo 0.5... e così via.

ctx.setTransform(2, 0, 0, 2, 0, 0);
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

ctx.setTransform(.5, 0, 0, .5, 0, 0);
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

INCLINARE (RUOTARE)

Per inclinare una figura in orizzontale si valorizza l'argomento io con un numero radiale da 0 a 1, mentre per inclinarlo in verticale si usa l'argomento iv.

ctx.setTransform(1, .5, 0, 1, 0, 0);
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

ctx.setTransform(1, 0, .5, 1, 0, 0);
ctx.fillStyle = 'blue';
ctx.fillRect(150, 50, 100, 100);

Con questi argomenti è possibile anche ruotare la figura, basta passargli lo stesso valore, ma uno positivo e l'altro negativo.

ctx.setTransform(1, .5, -.5, 1, 0, 0);
ctx.fillStyle = 'red';
ctx.fillRect(150, 50, 100, 100);

let degree = 45;
let radiant = degree * Math.PI / 180;
ctx.setTransform(1, radiant, -radiant, 1, 0, 0);
ctx.fillStyle = 'blue';
ctx.fillRect(250, 0, 100, 100);

Nel secondo quadrato dello script ho usato la formula grado * Math.PI / 180 per trasformare i gradi in radianti e l'ho ruotato di 45gradi.

TRASLARE

Gli ultimi due argomenti to e tv spostano il canvas del valore che gli passiamo sia orizzontalmente sia verticalmente.

ctx.setTransform(1, 0, 0, 1, 100, 100);
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

ctx.setTransform(1, 0, 0, 1, -30, 0);
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

CONCLUSIONE

Queste funzioni sono molto utili per la trasformazione, in un unico comando fanno risparmiare memoria, righe di codice e tempo.

Spero che l'articolo ti sia piaciuto Se hai dei consigli, suggerimenti o critiche costruttive lasciami un commento qui sotto oppure contattami trammite i miei social.