Tutorialdock | Free Web Resources

HTML5: canvas – disegnare

| di:

HTML5 3D Graphics Effects HTML5: canvas   le basi

Per disegnare con i canvas bisogna saper destreggiarsi bene con la griglia canvas o le coordinate dello spazio.

Nella precedente lezione abbiamo creato un canvas 100px di larghezza per 100px di altezza. L’immagine qui in basso rappresenta il nostro canvas di 100px per 100px a cui sono state applicate una griglia e due assi cartesiani.

canvas coordinates HTML5: canvas – disegnare

Come si vede anche dall’immagine, l’origine degli assi cartesiani è in alto a destra, quindi, quando diamo delle coordinate al nostro canvas dobbiamo ricordarci che se queste sono (2,3) lo shape sarà posizionato a 2 pixel da sinistra e a 3 pixel dall’alto.

Rettangoli

Per disegnare in un canvas un rettangolo abbiamo bisogno di queste funzioni:

fillRect(x,y,width,height) : Disegna un rettangolo pieno
strokeRect(x,y,width,height) : Disegna il bordo di un rettangolo
clearRect(x,y,width,height) : Pulisce l'area specificata e la rende completamente trasparente

Facciamo subito un esempio per capire meglio:

function draw(){
  var canvas = document.getElementById('dimostrazione');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
  }
}

Il risultato sarà questo:

Con la funzione fillRect viene a crearsi un rettangolo (in questo caso tutti i rettangoli sono quadrati), posizionato a 25px da sinistra e a 25px dall’alto, con 100px di larghezza e 100px di lunghezza.

Poi, viene pulita e resa trasparente l’area centrale, con la funzione clearRect e viene a crearsi un buco; in questo buco, a 50px di distanza dall’alto e da sinistra viene fatto disegnare il bordo di un rettangolo, con strokeRect, di 50px per 50px.

Per capire meglio il funzionamento di queste funzioni provate a eliminare strokeRect e vedrete solamente un buco, mentre lasciando solo strokeRect, vedrete solamente il bordo di un rettangolo di 50px per 50px.

Tags:


L'Autore

Co-fondatore ha realizzato personalmente il codice su cui si basa Tutorialdock. Ora si occupa di programmazione scrivendo articoli nella categoria tutorial. Sito web dell'autore

Tips: abilitare Airdrop sui mac non supportati ufficialmente