Effetto di transizione con canvas e HTML5
canvas è un elemento di HTML5 che consente di realizzare dinamicamente componenti grafiche all’interno di pagine Internet e Web applications utilizzando un linguaggio come JavaScript; sostanzialmente canvas non integra funzionalità specifiche per il disegno, per disporre di tali features sarà invece necessario ricorrere ad uno script.
In questo post verrà proposto un esempio basato sull’utilizzo del metodo transform() che nel caso specifico metterà a disposizione una matrice per la trasformazione di un quadrilatero; a livello pratico verrà disegnato un primo rettangolo, verrà aggiunta una matrice, ridisegnato il rettangolo, aggiunta un’ulteriore matrice e ridisegnato il rettangolo per l’ultima volta.
canvas verrà richiamato una sola volta, all’inizio del codice per la creazione di un rettangolo che conterrà tutti quelli sottoposti a trasformazione:
<canvas id="iRect" width="400" height="350" style="border:2px dashed #ccc;"></canvas>
Fatto questo si potranno definire due variabili, la prima associata al selettore del rettangolo precedentemente definito, la seconda deputata a definire il contesto nel quale verranno disegnati i rettangoli successiva che, nello specifico, sarà bidimensionale:
var drw = document.getElementById("iRect");
var res = drw.getContext("2d");Non rimarrà quindi che la fase relativa alla generazione dei tre triangoli che saranno il prodotto della trasformazione operata tramite la chiamata a transform():
res.fillStyle = "#33CC33"; res.fillRect(0, 0, 280, 120) res.transform(1, 0.5, -0.5, 1, 40, 10); res.fillStyle = "#00CC66"; res.fillRect(0, 0, 280, 120); res.transform(1, 0.5, -0.5, 1, 40, 10); res.fillStyle = "#339933"; res.fillRect(0, 0, 280, 120);
Per comodità del lettore verrà proposto di seguito l’intero codice della pagina Web destinata alla visualizzazione dell’output:
<!DOCTYPE html>
<html>
<head>
<title>Trasformazione con HTML5 e canvas</title>
</head>
<body>
<canvas id="iRect" width="400" height="350" style="border:2px dashed #ccc;"></canvas>
<script>
var drw = document.getElementById("iRect");
var res = drw.getContext("2d");
res.fillStyle = "#33CC33";
res.fillRect(0, 0, 280, 120)
res.transform(1, 0.5, -0.5, 1, 40, 10);
res.fillStyle = "#00CC66";
res.fillRect(0, 0, 280, 120);
res.transform(1, 0.5, -0.5, 1, 40, 10);
res.fillStyle = "#339933";
res.fillRect(0, 0, 280, 120);
</script>
</body>
</html>E’ da sottolineare che l’utilizzo di transform() influisce unicamente sugli elementi grafici generati dopo la sua chiamata, per cui non determinerà alcuna modifica a carico di quelli restanti,
