Canvas in JavaScript


Lezione 21 / 22

Canvas in JavaScript

Di Leo Sorge


javascript js

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>

 

Scopri i corsi

Le nostre guide possono essere molto utili per muovere i primi passi nel mondo della programmazione, ma se vuoi iniziare una nuova carriera in ambito digital & tech con il supporto costante dei docenti e tantissime esercitazioni pratiche, ti consigliamo di frequentare uno dei corsi della nostra Hackademy!

Scopri i corsi