La linea non ha un punto di inizio e un punto di fine ma è costituita da una sequenza di punti.
Si descrive una spezzata, invece di un segmento, e alla fine si disegna e/o si colora tutto.
- beginPath(), comincia un percorso, annulla il precedente
- closePath(), collega il punto attuale con il primo nel percorso, chiude il circuito
- fill(), colora la superficie limitata dal percorso attuale
- lineTo(x,y), un segmento dal punto attuale al punto specificato
- moveTo(x,y), un nuovo punto nel percorso
- stroke(), disegna il percorso attualmente attivo
Si possono impostare preventivamente le proprietà di disegno
- lineStyle=”…”, il colore del riempimento
- lineWidth=…, lo spessore della penna in pixel
- strokeStyle=”…”, il colore del tratto
Una linea da (x1,y1) a (x2,y2)
...
x1=50;
y1=50;
x2=250;
y2=150;
g2d.beginPath();
g2d.moveTo(x1,y1);
g2d.lineTo(x2,y2);
g2d.stroke();
Una sequenza di 5 linee separate
...
x1=50;
x2=250;
y=50;
g2d.beginPath();
for(i=1; i <= 5; i++)
{
g2d.moveTo(x1,y);
g2d.lineTo(x2,y);
y += 25;
}
g2d.stroke();
La stessa sequenza ma... senza staccare la penna dal foglio
...
x1=50;
x2=250;
y=50;
g2d.beginPath();
for(i=1; i <= 5; i++)
{
g2d.lineTo(x1,y);
g2d.lineTo(x2,y);
y += 25;
}
g2d.stroke();
Alla fine chiude il circuito
...
x1=50;
x2=250;
y=50;
g2d.beginPath();
for(i=1; i <= 5; i++)
{
g2d.lineTo(x1,y);
g2d.lineTo(x2,y);
y += 25;
}
g2d.closePath();
g2d.stroke();
Riempimento
...
x1=50;
x2=250;
y=50;
g2d.beginPath();
for(i=1; i <= 5; i++)
{
g2d.lineTo(x1,y);
g2d.lineTo(x2,y);
y += 25;
}
g2d.closePath();
g2d.fill();
Riempimento e contorno con colori diversi
...
x1=50;
x2=250;
y=50;
g2d.beginPath();
g2d.fillStyle="red"; // colore del riempimento: rosso
g2d.strokeStyle="blue"; // colore del tratto: blu
g2d.lineWidth=2; // spessore del tratto: 2 pixel
for(i=1; i <= 5; i++)
{
g2d.lineTo(x1,y);
g2d.lineTo(x2,y);
y += 25;
}
g2d.closePath();
g2d.fill();
g2d.stroke();
......