Ciao Mondo! Sono in un Canvas!
Questo articolo è parte della collana Realizzare Giochi in HTML5
Altri articoli in questa collana:
- Realizzare giochi con i Canvas di HTML5 e JavaScript Ep. I (Corrente)
- Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas
- Realizzare un Gioco in HTML5 Ep. III: Animare gli elementi
Anche l’elemento <canvas> è accessibile in JavaScript attraverso il DOM, ma non è così per il suo contenuto. Il <canvas> funziona in un modo che si chiama immediate mode rendering, questo significa che possiamo colorare direttamente i pixel al suo interno, ma non ci viene fornito un elenco di elementi in esso contenuti.
Per lavorare con i Canvas è necessario utilizzare il DOM una volta sola, per localizzare il tag <canvas>, e successivamente utilizzare l’API di disegno proprie di questo elemento.
<!doctype html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Una pagina HTML con un Canvas</title>
</head>
<body>
<canvas width="800" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Ciao Mondo!", 10, 50);
</script>
</body>
</html>Finalmente vediamo il tag <canvas> in azione. Gli attributi width e height definiscono rispettivamente l’altezza e la larghezza del rettangolo che è il Canvas.
Tutto il codice JavaScript è contenuto all’interno del tag <script> … </script>.
var canvas = document.getElementsByTagName("canvas")[0];Seleziona l’elemento <canvas> nel DOM utilizzando lo stesso sistema dell’esempio precedente.
var ctx = canvas.getContext("2d");Accede al Contesto 2D del Canvas, questo contesto non fa parte del DOM ma rappresenta tutti i pixel al suo interno e dispone di diversi metodi per scrivere e leggere i pixel al suo interno.
ctx.font = "30px Arial";Definisce una Proprietà font nel Contesto 2D, questa Proprietà descrive la dimensione e il tipo di carattere da utilizzare in caso di scrittura.
ctx.strokeText("Ciao Mondo!", 10, 50);Scrive un testo in stile outline, con la frase «Ciao Mondo!», il testo è posizionato a 10 pixel di distanza dal bordo sinistro e a 50 pixel di distanza dal bordo superiore.
Se tutto è andato bene dovremmo avere una pagina HTML con un Canvas al suo interno, e questo Canvas dovrebbe avere questo aspetto:
Continua a leggere questa collana:
Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas
4 risposte su “Realizzare giochi con i Canvas di HTML5 e JavaScript Ep. I”
tutorial carino ed efficace. E’ logico che hai appena buttato giù il prologo di un vero e proprio “romanzo” noto come developing di un videogame. Stima per il risultato.
Grazie Dario, l’idea è proprio quella di realizzare una guida completa a partire praticamente da zero. Se questa serie di articoli avrà successo pensavo di inserire successivamente strumenti sempre più completi: da CreateJS a Unity3D. Vedremo come si evolverà, tu torna spesso a trovarmi ;)
inoltre ho notato con mio grande poiacere che hai una Repository molto interessante su GitHub, sarebbe molto interessante un post su come creare un componente per github e le linee guida per pubblicare correttamente (tipo plugin js o wordpress)
Ottimo suggerimento, già dal prossimo articolo creerò un Repository per chi volesse seguirmi e così gli utenti più intraprendenti potranno partecipare direttamente alla stesure del codice ;)