Coordinate HTML Canvas
- Pagina precedente Disegno Canvas
- Pagina successiva Linea Canvas
Coordinate del canvas
Il canvas HTML è una griglia bidimensionale.
Le coordinate dell'angolo in alto a sinistra del canvas sono (0,0).
Nell'ultimo capitolo, abbiamo utilizzato il metodo: fillRect(0,0,150,75).
Significa: disegna un rettangolo di 150x75 pixel a partire dall'angolo in alto a sinistra (0,0).
Esempio di coordinate
Posiziona il mouse sul rettangolo sottostante per vedere le coordinate x e y:
Disegna una linea
Per disegnare una linea retta sul canvas, utilizzare i seguenti metodi:
- moveTo(x,y) - Definire l'inizio della linea
- lineTo(x,y) - Definire la fine della linea
Per disegnare una linea, devi utilizzare uno dei metodi di "pittura", come stroke().
Esempio
Definisci il punto di partenza (0,0) e il punto di arrivo (200,100). Poi utilizza il metodo stroke() per disegnare effettivamente la linea:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Disegna un cerchio
Per disegnare un cerchio sul canvas, utilizzare i seguenti metodi:
- beginPath() - Inizia un percorso
- arc(x,y,r,startangle,endangle) - Creare un arco/curva
Per creare un cerchio con arc(): imposta l'angolo di inizio a 0, l'angolo di fine a 2 * Math.PI. I parametri x e y definiscono le coordinate x e y del centro del cerchio. Il parametro r definisce il raggio del cerchio.
Esempio
Usare il metodo arc() per definire un cerchio. Poi utilizzare il metodo stroke() per disegnare effettivamente il cerchio:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
Vedi anche:
- Pagina precedente Disegno Canvas
- Pagina successiva Linea Canvas
