Disegnare Forme Base nel Canvas di HTML5

Imparare a disegnare forme base come rettangoli, cerchi e linee è il primo passo fondamentale per lavorare con il Canvas di HTML5. In questa lezione, esploreremo come utilizzare JavaScript per disegnare queste forme semplici.

Il rettangolo è forse la forma più semplice da disegnare nel Canvas. Esistono diversi metodi per disegnare rettangoli:

Per disegnare un rettangolo pieno, usiamo fillRect(x, y, width, height). Dove x e y sono le coordinate dell'angolo superiore sinistro del rettangolo, e width e height sono la larghezza e l'altezza del rettangolo.

Per disegnare il contorno di un rettangolo, usiamo strokeRect(x, y, width, height). Questo metodo disegna solo il perimetro del rettangolo.

Disegnare Cerchi e Archi

Per disegnare cerchi o archi, usiamo il metodo arc(x, y, radius, startAngle, endAngle, anticlockwise):

Un cerchio completo può essere disegnato impostando startAngle a 0 e endAngle a 2Math.PI.

ctx.arc(50, 50, 40, 0, 2Math.PI); disegna un cerchio con centro (50, 50) e raggio 40.

Il metodo arc può essere utilizzato anche per disegnare porzioni di cerchi (archi) semplicemente modificando gli angoli di inizio e fine.

Disegnare Linee

Disegnare linee richiede un approccio leggermente diverso. Si utilizza una combinazione di metodi per tracciare il percorso e poi disegnare la linea:

Per disegnare una linea, iniziamo con beginPath(), poi usiamo moveTo(x1, y1) per spostarci al punto di inizio e lineTo(x2, y2) per definire il punto finale. Infine, chiamiamo stroke() per disegnare la linea.

Esempio di codice per disegnare una linea:

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(50, 50);
ctx.stroke();

Conclusione

Disegnare forme base come rettangoli, cerchi e linee è un'abilità essenziale nel Canvas di HTML5. Con la pratica, potrai combinare queste forme per creare disegni più complessi e iniziare a esplorare la grafica avanzata nel Canvas.

Nelle prossime lezioni, esploreremo come combinare queste forme di base per creare disegni più dettagliati e come applicare stili e colori per migliorare il tuo lavoro.