CONTATTACI

Guide per aspiranti programmatori

Lezione 22 / 23

Canvas in JavaScript

La tela (canvas) è un’area rettangolare vuota dello schermo su cui è possibile disegnare vari elementi grafici, come linee, cerchi e immagini. Un canvas è quindi un elemento HTML utile per disegnare elementi grafici su una pagina Web tramite script. Il canvas può creare animazioni, grafici interattivi e altre visualizzazioni dinamiche. È supportato dalla maggior parte dei browser Web moderni.

L’ambiente di canvas è bidimensionale, ovvero sul piano. Per lavorare in tre dimensioni esistono altre soluzioni, come WebGL o three.js.

Prendi il file index.html, localizza i tag body ed inserisci tra loro il seguente codice:

<h1>Guida AULAB su JavaScript</h1>
<canvas id="myCanvas"></canvas>
<script>
   let canvas = document.getElementById("myCanvas");
   let ctx = canvas.getContext("2d");

   ctx.fillStyle = "red";
   ctx.fillRect(20, 20, 150, 100);

La prima riga dello script recupera il nodo nel DOM che rappresenta l’elemento <canvas> e chiama il metodo document.getElementById(). A questo punto è possibile disegnare, partendo dal contesto del disegno, usando getContext() per indicare la bidimensionalità, 2d.

 

Eseguendolo su LiveServer, otterrai un quadrato rosso in alto a destra.

 

Vediamo riga per riga cosa succede.

 

Nell’HTML bisogna fissare un riferimento al nuovo oggetto, di nome myCanvas:

<canvas id="myCanvas"></canvas>

Poi guarda lo script. 

La prima cosa da fare è dichiarare una variabile che contenga il canvas passato dal linguaggio HTML:

var canvas = document.getElementById("myCanvas");

Per disegnare si usa, normalmente, un foglio o tela a due dimensioni:

var ctx = canvas.getContext("2d");

Per la quale scegliamo come “stile di riempimento” il colore rosso:

ctx.fillStyle = "red";

Chiediamo, ora, di riempire (fill) un rettangolo sulla tela, con quattro parametri: posizione, attraverso il punto più in alto a sinistra (20, 20), la larghezza (150) e l’altezza (100).

ctx.fillRect(20, 20, 150, 100);

Proviamo a complicare l’esempio, unendo anche il controllo del mouse come hai visto nella sezione Events.

Il seguente programma legge la posizione del mouse e quando clicchi sul tasto sinistro sposta in quel posto il rettangolo rosso.

<body>
   <h1>Guida AULAB su JavaScript</h1>
   <canvas id="myCanvas"></canvas>
   <script>
      // Get the canvas element
      let canvas = document.getElementById("myCanvas");
      let ctx = canvas.getContext("2d");

      // Set the canvas size
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // Get the mouse position and draw a red box on that position
      canvas.addEventListener("mousedown", function(event) {
         if(event.button === 0){
            let x = event.clientX;
            let y = event.clientY;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = "red";
            ctx.fillRect(x-50, y-50, 100, 100);
         }
      });
   </script>

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.