Coordinate HTML della tela
Coordinate della tela
La tela HTML è una griglia bidimensionale.
L'angolo in alto a sinistra della tela ha le coordinate (0,0)
Nel capitolo precedente, hai visto questo metodo utilizzato: fillRect(0,0,150,75).
Ciò significa: Inizia dall'angolo in alto a sinistra (0,0) e disegna un rettangolo di 150x75 pixel.
Esempio di coordinate
Passa il mouse sopra il rettangolo sottostante per vedere le sue coordinate x e y:
Disegna una linea
Per disegnare una linea retta su una tela, utilizzare i seguenti metodi:
- moveTo( x,y ) - definisce il punto iniziale della linea
- lineTo( x,y ) - definisce il punto finale della linea
Per disegnare effettivamente la linea, devi usare uno dei metodi "ink", come stroke().
Esempio
Definire un punto iniziale in posizione (0,0) e un punto finale in posizione (200,100). Quindi usa il metodo stroke() per disegnare effettivamente la linea:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Disegna un cerchio
Per disegnare un cerchio su una tela, utilizzare i seguenti metodi:
- beginPath() - inizia un percorso
- arc(x,y,r,startangle,endangolo) - crea un arco/curva. Per creare un cerchio con arc(): Impostare l'angolo iniziale su 0 e l'angolo finale su 2*Math.PI. I parametri xey definiscono le coordinate xey del centro del cerchio. Il parametro r definisce il raggio del cerchio.
Esempio
Definisci un cerchio con il metodo arc(). Quindi usa il metodo stroke() per disegnare effettivamente il cerchio:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();