Tela coordinate
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) .
Questo significa: START nell'angolo in alto a sinistra (0,0) e disegnare un rettangolo 150x75 pixel.
coordinate Esempio
Mouse sopra il rettangolo qui sotto per vedere la sua 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 di partenza della linea
- lineTo( x,y ) - definisce il punto finale della linea
Per disegnare in realtà la linea, è necessario utilizzare uno dei "ink" metodi, come stroke() .
Esempio
Definire un punto di partenza in posizione (0,0) , e un punto finale in posizione (200,100) . Quindi utilizzare la stroke() metodo per disegnare in realtà la linea:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); Prova tu stesso " Disegnare un cerchio
Per disegnare un cerchio su una tela, utilizzare i seguenti metodi:
- beginPath() - inizia un percorso
- arc(x,y,r,startangle,endangle) - crea un arco / curva. Per creare un cerchio con arc() : Set angolo iniziale a 0 e l'angolo finale a 2 * Math.PI. I parametri x e y definiscono il x e y coordinate del centro del cerchio. Il parametro r definisce il raggio del cerchio.
Esempio
Definire un cerchio con l' arc() metodo. Quindi utilizzare la stroke() metodo per disegnare in realtà 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(); Prova tu stesso "