Disegnare Forme Base

Il disegno di forme base come rettangoli, cerchi e linee è un fondamento essenziale per la grafica nel Canvas di HTML5. Queste forme costituiscono i blocchi costruttivi per grafiche più complesse e applicazioni interattive. In questa lezione, apprenderemo come utilizzare le funzioni di JavaScript per disegnare queste forme nel Canvas.

Disegnare Cerchi e Archi

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

Per disegnare un cerchio completo, impostiamo startAngle a 0 e endAngle a 2Math.PI. Ad esempio, ctx.arc(50, 50, 40, 0, 2Math.PI) disegna un cerchio con centro in (50, 50) e raggio di 40.

È anche possibile disegnare archi o porzioni di cerchi modificando gli angoli di inizio e fine nel metodo arc.

Disegnare Linee

Per disegnare linee, usiamo una serie di metodi per definire un percorso e poi tracciarlo:

Per disegnare una linea, iniziamo con beginPath() per iniziare il percorso. Usiamo moveTo(x1, y1) per spostare il cursore al punto di inizio della linea, e poi lineTo(x2, y2) per definire il punto finale della linea. Infine, usiamo stroke() per disegnare la linea tracciata.

Esempio di codice per disegnare una linea:
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(50, 50);
ctx.stroke();

Questi esempi rappresentano solo l'inizio di ciò che è possibile fare con il Canvas di HTML5. Imparando a disegnare forme base, hai posto le fondamenta per creare grafiche più complesse e interattive. Pratica questi concetti e sperimenta con dimensioni, colori e posizioni per migliorare le tue abilità di disegno nel Canvas.

Guida: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes