Traslazione Canvas HTML5

Metodi di trasformazione del Canvas HTML5, esempio online di come utilizzare il Canvas HTML5 per ruotare, spostare, ingrandire, ruotare attorno a punti diversi, impostare rapporti di ingrandimento, ecc.

Puoi applicare le trasformazioni a qualsiasi contenuto disegnato sulla galleria HTML5. Ecco l'elenco delle trasformazioni che puoi applicare:

• Spostamento (spostamento del contenuto disegnato)

• Rotazione

• Zoom

In questo articolo si introducono tutte queste trasformazioni

Matrice di trasformazione

Puoi impostare la matrice di trasformazione nel contesto 2D. Questa matrice verrà moltiplicata per tutto il contenuto disegnato sulla galleria. Per gli esempi utilizzati in questo tutorial, l'ho impostato come matrice "identità", che moltiplica le coordinate x, y per ottenere x, y. In altre parole, non si esegue alcuna trasformazione.
Questo è il modo di impostare la matrice di trasformazione come matrice unitaria:

context.setTransform(1, 0, 0, 1, 0, 0);

Spostamento

Puoi applicare lo spostamento a tutto il contenuto disegnato sulla galleria. Lo spostamento significa la ricollocazione del contenuto disegnato. Questo è il modo in cui imposti lo spostamento nel codice:

var x = 100;
var y = 50;
context.translate(x, 25);

Questo esempio sposterà tutti i shaped disegnati sulla galleria di 100 unità sull'asse x e 50 unità sull'asse y.
Attenzione: lo spostamento è applicabile solo ai shaped disegnati dopo la chiamata alla funzione translate(). I shaped disegnati prima della chiamata alla funzione non sono influenzati.
Questo è un altro esempio. Due rettangoli sono disegnati nello stesso punto di coordinate, ma uno è disegnato prima di chiamare la funzione translate(), e l'altro dopo.

<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas non supportato
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 100, 100);
context.translate(50, 25);
context.fillStyle = "#0000ff";
context.fillRect(10, 10, 100, 100);
</script>

Questo è il risultato del disegno sulla galleria:

Rotazione

Puoi applicare la rotazione automatica a qualsiasi shaped disegnato sulla galleria HTML5. Questo viene fatto tramite la funzione rotate() nel contesto 2D. Ecco un esempio semplice:

context.rotate(radians);

L'angolo di rotazione viene passato come parametro alla funzione rotate(). Il valore deve essere espresso in radianti invece che in gradi.
Tutti i-shaped disegnati dopo la rotazione si torneranno attorno al punto 0,0 della galleria. Questo è l'angolo in alto a sinistra della galleria.
Come per la traslazione, la rotazione viene applicata solo a tutte le forme disegnate dopo la chiamata rotate()
Questo è un esempio di come disegnare lo stesso rettangolo prima e dopo la rotazione:

<canvas id="ex2" width="500" height="150" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas non supportato
</canvas>
<script>
　var canvas = document.getElementById("ex2");
var context = canvas.getContext("2d");
　context.fillStyle = "#ff0000";
　context.fillRect(10, 10, 100, 100);
　context.rotate((Math.PI / 180) * 25); // ruota di 25 gradi
　context.fillStyle = "#0000ff";
　context.fillRect(10, 10, 100, 100);
</script>

Ecco come appare quando si disegna un rettangolo sul riquadro di disegno:

Ruotare attorno a un punto diverso

Come già detto, tutte le forme ruotano attorno all'angolo superiore sinistro del riquadro di disegno (0,0). Ma cosa succede se vuoi ruotare una forma attorno a un punto diverso? Ad esempio, ruotare la forma attorno al suo proprio centro?
Per ruotare una forma attorno al suo proprio centro, è necessario prima spostare il riquadro di disegno al centro della forma, poi ruotare il riquadro di disegno, poi spostare di nuovo il riquadro di disegno a 0,0 e poi disegnare la forma.
Questo è un esempio di codice che fa ruotare il rettangolo blu attorno al suo centro:

<canvas id="ex3" width="500" height="150" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas non supportato
</canvas>
<script>
var canvas = document.getElementById("ex3");
var context = canvas.getContext("2d");
var x = 10;
var y = 10;
var width = 100;
var height = 100
var cx = x + 0.5 * width;
var cy = y + 0.5 * height;
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
context.translate(cx, cy);
context.rotate((Math.PI / 180) * 25); // ruota di 25 gradi
context.translate(-cx, -cy); // reimposta il centro al 0,0
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

Ecco come appare quando si disegna sul riquadro di disegno:

Questo esempio sposta prima il centro del riquadro di disegno (sposta) al centro del quadrato (cx, cy). Poi ruota il riquadro di disegno di 25 gradi. Poi, riporta il riquadro di disegno di nuovo a 0,0. Ora, il riquadro di disegno ruota attorno a cx, cy di 25 gradi. Tutto ciò che disegni ruoterà e verrà visualizzato attorno a cx, cy. Infine, il rettangolo viene disegnato come se nulla fosse successo, ma ora ruoterà attorno a cx, cy di 25 gradi. Questo può essere fatto solo con chiamate di trasformazione. Le coordinate del rettangolo non cambiano. Nota il contesto.fillRect(), le due chiamate per disegnare i rettangoli rossi e blu sono identiche. È la chiamata di trasformazione tra loro che le fa apparire in posizioni e posizioni di rotazione diverse

Zoom

È possibile applicare uno zoom automatico a tutte le forme disegnate sul canvas HTML5.
Quando si zooma, è possibile zoomare tutte le coordinate sull'asse x e y tramite alcuni fattori. Puoi impostare questi fattori utilizzando la funzione scale(), come segue:

var scaleX = 2;
var scaleY = 2;
context.scale(scaleX, scaleY);

Questo esempio ridimensiona tutte le coordinate sull'asse x e y di due volte.
Come translate() e rotate(), la scala si applica solo alle forme disegnate dopo la chiamata scale().
Questo è un altro esempio di codice per disegnare rettangoli rossi e blu, in cui la scala si applica al rettangolo blu:

<canvas id="ex5" width="500" height="250" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas non supportato
</canvas>
<script>
var canvas = document.getElementById("ex5");
var context = canvas.getContext("2d");
var x = 10;
var y = 10;
var width = 100;
var height = 100
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
context.scale(2, 2);
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

Questi sono i grafici generati sul canvas:

Attenzione, la dimensione del rettangolo blu è il doppio di quella del rettangolo rosso.
Attenzione, la distanza dalla parte superiore sinistra del rettangolo blu al vertice superiore sinistro del canvas (0,0) è anche due volte. Tutte le coordinate sono ridimensionate due volte, la parte superiore sinistra del rettangolo è la stessa cosa. Se si desidera evitare di muovere le forme durante lo zoom, è necessario combinare lo zoom con lo spostamento.

Rapporto di scala

Puoi utilizzare la funzione di scala per ottenere la funzione di scala. Il canvas contiene 4 rettangoli. Sotto il canvas c'è un campo di input che puoi usare per modificare il livello di scala (rapporto di scala).

Scala:

Se vedete un campo di testo con un valore di scala, inserite un livello di scala tra 1 e 10, quindi uscite dal campo di testo per vedere i risultati. Se vedete un cursore, è sufficiente muoverlo.

Combinazione di traslazione, rotazione e scala

Naturalmente, è possibile combinare tutte e tre le trasformazioni sullo stesso canvas. Ma, come quando si combinano rotazione e traslazione, l'ordine delle chiamate di funzione al contesto 2D è anche molto importante. Se scale() viene chiamato prima di translate() e altri, il risultato potrebbe apparire diverso. Potrebbe essere necessario adattare l'ordine delle chiamate di funzione per renderlo corretto