Il <canvas> è un elemento Html5 per la grafica gestita interamente da javascript, ideale per le animazioni 2d o 3d, videogiochi, manipolazioni di foto e video.
Nato come sostituto del defunto Flash, una tecnologia di terze parti che ha spopolato negli anni 2000 proprio per le animazioni incredibili che portava sul web, ma viste fino a quel momento, ma, aveva seri problemi di sicurezza quindi si è deciso di rimpiazzarlo con un elemento html nativo.
L'elemento canvas ci permette di creare una tela digitale (canvas in inglese si traduce con tela) su nostro browser. Quindi ci permette di creare uno spazio rettangolare, delle dimensioni che vogliamo, dove poter creare i nostri capolavori digitali.
Pro 🔺 e contro 🔻 del canvas
Quando è perché bisogna usarlo e quando invece sono meglio altre soluzioni
Pro
- Le animazioni sono molte più veloci e fluide.
- Controllo totale su tutti gli elementi grazie al javascript.
- Gestione della memoria ottimizzata. Questo significa, notevole risparmio di memoria.
- Elevata gestione di calcolo. Esempio: nei videogiochi dove ogni secondo ( il tempo dipende dal frame rate ) bisogna calcolare spostamenti, collisioni, input della tastiera o del mouse su svariati oggetti presenti nel canvas c’è bisogno di una tecnologia in grado di gestire tutto ciò senza rallentamenti.
Contro
- Complesso, che non vuol dire complicato, ma va certamente studiato e compreso!
- Se nel vostro progetto dovete animare pochi elementi, magari al click del mouse o non avete bisogno di un refresh continuo, è inutile complicarsi la vita con il canvas, vi conviene gestirlo con il css.
- Perde di fluidità all’aumentare delle dimensioni e del numero di elementi da gestire.
HTML
Essendo, il canvas, gestito interamente da javascript, il file html sara un documento basico con un tag <canvas>.
Quest'ultimo avrà come attributo un identificativo (id), che con tanta fantasia, chiameremo “myCanvas”.
<html>
<head>
<meta charset="UTF-8">
<title>Platform game - single screen</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
<script src="main.js"></script>
</html>
Il documento html, inoltre, chiamerà:
- un file main.js, da dove gestiremo il tutto.
- un file css, che anche se non è indispensabile, darà un po' di stile.
CSS
Nello stile css centreremo il canvas al centro dello schermo e gli mettiamo un bordo nero per renderlo visibile.
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
canvas {
border: 3px solid black;
}
JS
Questa è la parte più importante e un po' più complessa, quindi in questo post vedremo solo come inizializzarlo.
let canvas = document.getElementById('myCanvas');
canvas.width = 600;
canvas.height = 400;
let ctx = canvas.getContext('2d');
Questa è la porzione di codice base che inizializza il canvas. La useremo per molti progetti che utilizzano questa tecnologia, quindi molto spesso.
Abbiamo catturato l’elemento <canvas> grazie al comando javascript document.querySelector("#myCanvas"); tramite il suo identificativo #myCanvas e lo abbiamo salvato nella variabile canvas.
Abbiamo assegnato l’altezza e la larghezza al canvas grazie alle proprietà width e height, di default le dimensioni sono di 300px x 150px.
Con il metodo getContext abbiamo specificato il contesto con il quale lavorare, nel nostro caso è il ‘2d’ e con esso avremo accesso a delle funzioni che ci permetteranno disegnare e manipolare la tela bidimensionale.
Se al posto del contesto “2d”, avessimo specificato “webgl”, ora lavoreremo con dei metodi per il “3d”.
CONCLUSIONE
Questo è il risultato, per adesso è un po' triste, ma quello che abbiamo appreso oggi è solo la punta di un iceberg, nei prossimi post svisceremo molte potenzialità di questa fantastica tecnologia.
Se avete dei consigli, suggerimenti o critiche costruttive lasciatemi un commento qui sotto oppure contattatemi trammite i miei social.
Top comments (0)